CSS/Javavscript Side Hover Menu?

[nivek516]

I am creating a side menu like Example 5 on this website.

I am setting this up in a Dreamweaver Template, wanting to know if there is any javascript coding to allow the hover state of the link to be active while on the link's page. I figured this would be easier than creating a separate template for each page category. Plus, is there a way to have sub-links show up while on a link's page? Again, I would like to try to have only one template. Hope you can understand what I am saying! Let me know if you can't! Thanks!

[Nile]

Try making this your css:

.menu {
 width: 150px;
}
.menu ul {
 display: block;
 padding: 0px;
 margin: 0px;
 list-style: none;
}
.menu ul li {
 display: block;
 margin: 0px;
 list-style: none;
}
.menu a {
 display: block;
 color: darkblue;
 text-decoration: none;
 padding: 5px;
 border-bottom: 1px solid #e8e8e8;
}
.menu a:hover, .menu ul li.current a {
 background-color: #e8e8e8;
 border-bottom: 1px solid #d8d8d8;
 color: black;
}

Then for your menu:

<div class="menu">
 <ul>
  <li><a href="url">Link 1</a></li>
  <li><a href="url">Link 2</a></li>
  <li><a href="url">Link 3</a></li>
  <li class="current"><a href="url">Link 4</a></li>
  <li><a href="url">Link 5</a></li>
 </ul>
</div>

Add the highlighted to the currently active page. Try this for your links under the main link.

[nivek516]

Is there a way not to define each separate link on every page? Is there a way to use javascript conditions to ask [if the (current page) a href="1.html" then set "Link 1" to CSS class="current"] and so on. Also, is there a way to set [if "Link 1" class="current", then show (<li><a href="2.html">Sub-Link 1</a></li>....]

Honestly, I am looking for a more difficult way to set it up, but in the long run, it will be easier to edit if I wanted to change it.

[Nile]

I guess it is possible, but not the best idea.

If anything I'd use PHP. If you agree on using PHP I will try - but javascript isn't the language to do it in. Some people disable javacript.

Javascript goes from the source to the browser.

PHP goes from the server to the source to the browser.