Web Wiz - Green Windows Web Hosting
Web Wiz Homepage Search Web Wiz

  New Posts New Posts RSS Feed - Navigation Menu Advice needed.
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

Navigation Menu Advice needed.
 Post Reply Post Reply Page  123 4>
Author
  Topic Search Topic Search  Topic Options Topic Options
Maxi View Drop Down
Groupie
Groupie


Joined: 24 October 2002
Location: United Kingdom
Status: Offline
Points: 49 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Maxi Quote  Post ReplyReply Direct Link To This Post Topic: Navigation Menu Advice needed.
    Posted: 15 November 2003 at 12:24pm

Hi all, hope someone can advice me of what I believe is the most important part of any website: The Navigation.

I am presently using a Javascript navigation menu called HVMENU 5 whish is an excellent menu system, that makes a microsoft style menu (dropdown menues ect.) It can be viewed at the below link.http://www.dynamicdrive.com/dynamicindex1/hvmenu/

My problem is however what to do if people do not allow Scripts to run in there browser, as if they do not have scripts enabled my menu will not show.

Can anybody (Bruce?) advice me of how I can build a menu like the menu on the left of this Forum? I like the Dark Grey Mouseover effect when the link is highlighted, and even if scripting is disabled the reader can still see the links without the mouseover effect....instead of the whole menu disappearing.

How can I make this mouseover effect if I build a menu in a table...Just so that the cell will be highlighted the same way? (Where can I find this javascript and information on how to implement it?)

Hope somebody can help me out here as Navigation is giving me sleepless nights

 

Kind Regards

Maxi

 
Back to Top
God_Struth View Drop Down
Senior Member
Senior Member
Avatar

Joined: 07 August 2003
Location: United Kingdom
Status: Offline
Points: 218 		Post Options Post Options   Thanks (0) Thanks(0)   Quote God_Struth Quote  Post ReplyReply Direct Link To This Post Posted: 15 November 2003 at 12:29pm
It uses CSS and the mouse over event, very easily done!
"I'm only trying to help......"
Back to Top
God_Struth View Drop Down
Senior Member
Senior Member
Avatar

Joined: 07 August 2003
Location: United Kingdom
Status: Offline
Points: 218 		Post Options Post Options   Thanks (0) Thanks(0)   Quote God_Struth Quote  Post ReplyReply Direct Link To This Post Posted: 15 November 2003 at 12:35pm
Sorry, forgot the CSS: 


a.nav  {

color : #2F03ED;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

font-size: 10px;

font-weight: bold;

background-color: #ffffff;

       }



a.nav:hover  {

color : #2F03ED;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

font-size: 10px;

font-weight: bold;

background-color: #cccccc;

       }
"I'm only trying to help......"
Back to Top
Maxi View Drop Down
Groupie
Groupie


Joined: 24 October 2002
Location: United Kingdom
Status: Offline
Points: 49 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Maxi Quote  Post ReplyReply Direct Link To This Post Posted: 15 November 2003 at 3:27pm

Hi God_Struth

Thanks for such a quick responce I had not expected that

I have taken your advice and have now been playing with the CSS for awhile and cannot figure out what to do, (CSS is not my strong point at all).

I was wondeing if you could point me in the direction of what I must do, to get this working. Hope you can help

This is what my style sheet looks like now:

------------------------------------------------------------ ---

<style TYPE="text/css">

DIV.Toolbar  A            {color: #FFFFFF; text-decoration:none}
DIV.Toolbar  A:link   {color:  #FFFFFF; text-decoration:none}
DIV.Toolbar  A:visited  {color: #FF FFFF; text-decoration:none}
DIV.Toolbar  A:hover   {color: #0000FF; text-decoration:none}
DIV.Toolbar  A:active  {color: #0000FF; text-decoration:none}

DIV.Links  A            {color: #009999; text-decoration:none}
DIV.Links  A:link   {color: #0 09999; text-decoration:none}
DIV.Links  A:visited  {color: #0099 99; text-decoration:none}
DIV.Links  A:hover   {color: #FF0000; text-decoration:none}

DIV.Login  A            {color: #666666; text-decoration:none}
DIV.Login  A:link   {color: #6 66666; text-decoration:none}
DIV.Login  A:visited  {color: #6666 66; text-decoration:none}
DIV.Login  A:hover   {color: #0000FF; text-decoration:none ; font-weight: normal}

DIV.IconLinks  A            {color: #009999; text-decoration:none}
DIV.IconLinks  A:link   {color:&nbs p;#009999; text-decoration:none}
DIV.IconLinks  A:visited  {color: # 009999; text-decoration:none}
DIV.IconLinks  A:hover   {color: #FF0000; text-decoration:none}


.Fields {
border: 1px #666666 groove;
; background-color: #FFFFFF
; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; background-position: center center
; font-weight: bold; color: #009999
}
.Buttons {
border: 1px #666666 groove;
; background-color: #009999
; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; background-position: center center
; font-weight: bold
; color: #CCCCCC
}
a.nav {
color : #2F03ED;
;font-family: Verdana, Arial, Helvetica, sans-serif
;text-decoration: none
;font-size: 10px
;font-weight: bold
;background-color: #ffffff
       }

a.nav:hover {
color : #2F03ED;
;font-family: Verdana, Arial, Helvetica, sans-serif
;text-decoration: none
;font-size: 10px
;font-weight: bold
;background-color: #cccccc
       }

</style>

_________________________________________________________

 

THIS IS WHAT MY MENU LOOKSLIKE

________________________________________________________

<html>

<head>
<meta http-equiv="Content-Language" content="fi">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="WWW/dvdvids/css/css.css">
</head>

<body>

<div align="left">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%">
    <tr>
      <td width="100%" class="nav:hover"><a href="http://www.Link1.com">LINK 1</a></td>
    </tr>
    <tr>
      <td width="100%"><a href="http://www.link2.com">LINK 2</a></td>
    </tr>
    <tr>
      <td width="100%"><a href="http://www.link3.com">LINK 3</a></td>
    </tr>
    <tr>
      <td width="100%"><a href="http://www.link4.com">LINK 4</a></td>
    </tr>
    <tr>
      <td width="100%"><a href="http://www.link5.com">LINK 5</a></td>
    </tr>
  </table>
</div>

</body>

</html>

________________________________________________________

Hope you can show me how to actually call the code to get the effect :-)

Hope that I do not sound totally stupid, and hope you can help out again.

Kind Regards

Maxi
Back to Top
God_Struth View Drop Down
Senior Member
Senior Member
Avatar

Joined: 07 August 2003
Location: United Kingdom
Status: Offline
Points: 218 		Post Options Post Options   Thanks (0) Thanks(0)   Quote God_Struth Quote  Post ReplyReply Direct Link To This Post Posted: 15 November 2003 at 6:20pm
Use the class in the link rather than the table:

Instead of:

<tr>
<td width="100%" class="nav:hover"><a href="http://www.Link1.com">LINK 1</a></td>
</tr>

You would do it:

<tr>
<td width="100%"><a href="http://www.Link1.com" class="nav">LINK 1</a></td>
</tr>


The CSS would look like:

a.nav {
color : #2F03ED;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
font-weight: bold;
       }
a.nav:visited {
color : #2F03ED;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
font-weight: bold;
       }
a.nav:hover {
color : #2F03ED;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
font-weight: bold;
background-color: #cccccc;
       }

"I'm only trying to help......"
Back to Top
Maxi View Drop Down
Groupie
Groupie


Joined: 24 October 2002
Location: United Kingdom
Status: Offline
Points: 49 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Maxi Quote  Post ReplyReply Direct Link To This Post Posted: 16 November 2003 at 4:50am

Hi God_Struth,

I am happy to say that that did 50% of the trick (i.e. It now highlights the area around the link).

Unfortunately it does not highlight the whole cell in which the link is in, like the way the webwiz menu on the left does.

Any ideas on how to do this would be appreciated. Thanks in advance for all your help already.

Regards

Maxi
Back to Top
God_Struth View Drop Down
Senior Member
Senior Member
Avatar

Joined: 07 August 2003
Location: United Kingdom
Status: Offline
Points: 218 		Post Options Post Options   Thanks (0) Thanks(0)   Quote God_Struth Quote  Post ReplyReply Direct Link To This Post Posted: 16 November 2003 at 10:47am
I ain't 100% sure, but I think you would have to use a little javascript to enable the whole cell to be active as such. (Think its javascript used to achieve the effect on this site..)

"I'm only trying to help......"
Back to Top
God_Struth View Drop Down
Senior Member
Senior Member
Avatar

Joined: 07 August 2003
Location: United Kingdom
Status: Offline
Points: 218 		Post Options Post Options   Thanks (0) Thanks(0)   Quote God_Struth Quote  Post ReplyReply Direct Link To This Post Posted: 16 November 2003 at 10:49am
Here's an example, but javascript ain't my thing but it does work: 



<html>

<head>

<script language="JavaScript">

function ON(num) {

  document.getElementById("cell" + num).bgColor = "#cccccc";

};



function OFF(num) {

  document.getElementById("cell" + num).bgColor = "#ffffff";

};

</script>

</head>

<body>





<table width=30% border=0>

<tr>

<td id="cell1" onMouseover="ON(1);" onMouseout="OFF(1);"><a href="#">cell 1</a></td>

</tr>

<tr>

<td id="cell2" onMouseover="ON(2);" onMouseout="OFF(2);">cell 2</td>

</tr>

<tr>

<td id="cell3" onMouseover="ON(3);" onMouseout="OFF(3);">cell 3</td>

</tr>

<tr>

<td id="cell4" onMouseover="ON(4);" onMouseout="OFF(4);">cell 4</td>

</tr>

<tr>

<td id="cell5" onMouseover="ON(5);" onMouseout="OFF(5);">cell 5</td>

</tr>

</table>

</body>

</html>

"I'm only trying to help......"
Back to Top
 Post Reply Post Reply Page  123 4>

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.08
Copyright ©2001-2026 Web Wiz Ltd.

Become a Fan on Facebook Follow us on X Connect with us on LinkedIn Web Wiz Blogs
About Web Wiz | Contact Web Wiz | Terms & Conditions | Cookies | Privacy Notice

Web Wiz is the trading name of Web Wiz Ltd. Company registration No. 05977755. Registered in England and Wales.
Registered office: Web Wiz Ltd, Unit 18, The Glenmore Centre, Fancy Road, Poole, Dorset, BH12 4FB, UK.

Prices exclude VAT at 20% unless otherwise stated. VAT No. GB988999105 - $, € prices shown as a guideline only.

Copyright ©2001-2026 Web Wiz Ltd. All rights reserved.