Vertical Menu Questions

[pab1953]

Two questions:

1) I want to be able to create a vertical menu in which the menu item for the page you are on has a different background color. Below is the CSS and HTML I'm using:

CSS
#navcontainer {width: 200px;}
#navcontainer ul {margin-left: 0;padding-left: 0;list-style-type: none;font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12.5px; font-weight:bold;}
#navcontainer a {display: block;padding: 3px;width: 160px;background-color: #036;border-bottom: 1px solid #eee;}
#navcontainer a:link, #navlist a:visited {color: #EEE;text-decoration: none;}
#navcontainer a:hover{background-color: #369;color: #fff;}

HTML
"<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">. . . </a></li>
</ul>
</div>"

2) I also want some menu items to have no text, just the bg color. But if I put nothing, the menu item collapses. This is one workaround, but not what I want: "<li><a href="#">. . . </a></li>"

Thanks for any help you can offer.

[Gibble]

Well for a blank line just a space written as &nbsp; in HTML.

[Xapti]

To get current page's button a different style, you must have each page's BODY given an ID. You must also give each link you want to affect an ID (or unique class).

In your style definitions, you must then give a style for each page ID, nav button combination, like this:

#contactpage #contactbutton {background-color:white}

[MWpro]

Xapti your way is interesting, but seems too complicated.

I would just do something as simple as this making an "active" class as the original poster tried to do already.

#menu a {
background: #FFF;
}

#menu .active {
background: #CCC;
}

<div id="menu">
<a href="" class="active">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>

As a side nice, I like to keep my menus nice and simple by styling the <a> element, instead of the <ul> element. This is possible if you set it to display:block first.

#menu a {
display: block;
width: 150px;
height: 20px;
}

That way the HTML can simply be:

<div id="menu">
<a href="" class="active">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>

Do what is comfortable for you though!

[edited by: MWpro at 6:16 am (utc) on July 22, 2007]

[SuzyUK]

MWPro, your way may seem simpler, but you should take a look at the two versions with no CSS applied, which is more accessible, or easier to navigate? ;)

Yes it's choices but it's generally accepted that a menu is a LIST of choices so the correct way to mark it up is using a LIST, so that's one, possibly the main, reason for using a list. Another reason for using lists is that it might afford you more styling hooks.. e.g. you can hook a background onto both the <li> and the <a> - which you might need to make things like tabs

as for using 'active' classes on individual links as opposed to the body ID method, both have their merit. Adding an active class to the individual link is what most people who dynamically generate their pages might use (PHP, ASP etc..) or indeed those who hand code and have just a few amendments/page choices to make.
However if you want to put the menu's HTML code into an SSI or similar, so any changes to it are site wide then the BODY ID method may be more simple to deal with for some.

pab1953, you can simplify your menu a little, you don't need to have an ID/Class on both the <li> and the <a>, you can target the style by just having it on the li.. then you just get specific to add the active link styles in, using two id 's in the selector will override the more general one where it applies

e.g.

#nav #active a:link {}

will overrule

 #nav a:link {}

no matter which order in the CSS because the first one has 2 x ID selectors in it which is more specific than the second one

using the same you don't need both the container and the ul to have ID's either, the list (ul) can be targeted via the container ID.

e.g.

CSS:
#nav {
width: 200px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12.5px;
font-weight: bold;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
display: block;
padding: 3px;
width: 160px;
background: #036;
border-bottom: 1px solid #eee;
text-decoration: none;
}
#nav a:link, #nav a:visited {color: #eee;}
#nav a:hover {background: #369; color: #fff;}

#nav #active a {background: #eee; color: #369;}

HTML:
<div id="nav">
<ul>
<li id="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">&nbsp;</a></li>
</ul>
</div>

[MWpro]

MWPro, your way may seem simpler, but you should take a look at the two versions with no CSS applied, which is more accessible, or easier to navigate? ;)

Point noted, but with a simple menu like this without CSS, the links will just be strung across the top, which is actually quite easy to navigate.

[pab1953]

Thanks for the advice and suggestions. I'll experiment. :)