Forum Moderators: not2easy
Now, however, I'd like to be able to designate a button as turned "on" so that a visitor knows when they are in a particular section. There will be a main "bucket" page in each section and multiple other pages of content in the section.
How do I do that?
Here's the CSS I have so far:
#navcontainer {
width: 180px;
padding: 0;
margin: 0;
border-collapse: collapse;
}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navcontainer a
{
display: block;
padding-top: 12px;
padding-left: 16px;
padding-bottom: 14px;
width: 164px;
background-color: #D8E8F5;
border-bottom: 1px solid #fff;
}
#navcontainer a:link, #navlist a:visited
{
color: #3380BD;
text-decoration: none;
overflow:hidden;
}
#navcontainer a:hover
{
background-color: #3380BD;
color: #fff;
}
Here's the page where it can be seen so far:
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
[edited by: tedster at 11:16 pm (utc) on June 9, 2005]
This is the code I use for my menu:
HTML
<ul id="menu"><li><a href="relationships/">Relationships</a></li><li><a href="parenting/">Parenting</a></li><li><a href="pregnancy/">Pregnancy</a></li><li><a href="health/">Health</a></li><li><a href="finance/">Finance</a></li><li><a href="lifestyles/">Lifestyles</a></li><li><a href="blog/">Blog</a></li></ul>
CSS
ul#menu {text-align:center;margin-left:0;padding-left:0;white-space:nowrap;}
#menu li {display:inline;list-style-type:none;font-size:115%;}
#menu a {font-size:90%;padding: .2em .4em;background:#8EA338; margin: 0 .1em; text-transform:lowercase;color:#fff;text-decoration:none;}
#menu a:hover {background:#F96611;}
#menu a.select {font-weight:bold;background:#F96611;border:3px solid #FFB380;}
Place the "select" class inside of the anchor, and wa-la, it sticks.
The first thing you should do (though it's probably already too late) is remove that link to your site - it violates item 13 of the Webmasterworld terms of service [webmasterworld.com].
To answer your question: learn about contextual selectors. CSS allows you to style elements based on the context in which they occur so that if, for example, a span appears inside a paragraph inside a list item inside an ordered list inside a div, you can style it with no need for ids or classes at all:
CSS
==========
div ol li p span {color:#f90;font-weight:bold;}
HTML
==========
<div>
<ol>
<li><p><span>This text is styled</span>, but this text is not...</p></li>
<li><p>And neither is this.</p></li>
</ol>
</div>
<ol>
<li><span>This isn't styled either</span></li>
</ol>
Once you understand that you're able to style elements by context (and that this also works in conjunction with ids and classes), styling the active menu item in a static page becomes quite simple.
In this type of case, you simply need to uniquely identify a) the element you want to style (i.e. the link in the menu), and b) the page in the website:
CSS
==========
/*
Styles a the link to the 'products' page when we're _on_ the 'products' page...
The following css declaration effectively says "apply the following styles to every <a> element that appears inside a <li> item with the id 'productsLink', which in turn appears inside a <body> element with the id 'products'."
I find it convenient at times to apply the id to the container for the <a> element, but it makes just as much sense to apply the id directly to the <a>.
*/
body#products li#productsLink a {color:#f90;font-weight:bold;border:2px solid #090;}
HTML
==========
<body id="products">
<ul id="navigation">
<li id="homeLink"><a href="#">Home</a></li>
<li id="productsLink"><a href="#">Products</a></li>
<li id="contactLink"><a href="#">Contact Us</a></li>
<li id="supportLink"><a href="#">Service & Support</a></li>
</ul>
</body>
The only real disadvantage to this method is that your list of contextual selectors can get quite long if you have many menu items; the full set of declarations for the HTML above would look like this:
body#home li#homeLink a,
body#products li#productsLink a,
body#contact li#contactLink a,
body#support li#supportLink a {
color:#f90;
font-weight:bold;
border:2px solid #090;
}
In cases over about 10 items, I would suggest opting for a solution coded in a server-side language such as php or asp that dynamically outputs a class to the active menu item.
-B
PS:
I just read nanotopia's reply. It's also correct, but the method I've described is quite a lot nicer when it comes to page-maintenance; the menu code can be identical on every page, and the only thing that needs to be different in the basic page layout is the id attribute of the body tag. As I mentioned, adding a class to the active menu item is best used in environments where a script generates the menu output.
adding a class to the active menu item is best used in environments where a script generates the menu
You're right. And in my case, a script dynamically inputs the class into the anchor when I'm at the selected page/section.
<head>
<style type="text/css" media="all">#navcontainer a:link, #navcontainer a:visited
{
color: navy;
background: #E5E5E5;
}</style>
</head>
I assume that your navigator page is linked to an external css file. Let me know if you have any problem apply it to your page.
I do have this working by setting each item - so thank you for that advice.
Any pointers toward the basis of a script to set adding the parameters dynamically such as some of you referred to? I will have a number of these left navs and it would be convenient to set up something more automated and not relying on my setting each page individually.
