Simple Organism
Turning Menu Items On and Off
Last one, I promise. Well at least for the CSS part. It's time to toss the visitors to our website a bone. As you know, most people lack patience, so if you frustrate your visitors by getting them lost, you're giving them even more anxiety. Until we can print out a bottle of xanax, let's be nice to the users...k? What we're going to do is give your visitors a heads up as to where they are on your site. That means we should turn the menus on showing your users what section they are in and the topic in which the article they are reading resides under.
If we really wanted to be an angel, a cookie trail would be amazing. For now, we'll stick to the menus.
Starting with the main menu, we need to give each button it's own unique identity. We will be using an ID in order to tell the main menu item which section we are on, so in this case we'll identify each button with classes. Why? Again, you're very inquisitive but it's all good. Isn't it much easier to use the same word or phrase for both identifying the section you are in and turning on that particular button/link? If we used ID's or classes for both, using the same name would cause conflicts. Trust me, it's simplier than you think. Start by giving each button in the main menu a class name. Be simple and use the name of the button or shorten it if it's two words.
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="news"><a href="#">Recent News</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
Painless enough. Now we want to turn on the "Recent News" button exposing that we're in the that section of our website. An easy place to make sure our document knows this is where we are is to add the same identity using an "id" to the <body> tag.
So we've created a relationship between both the body ID and the button class. Now using CSS we can use a common programming method, the "if" (conditional) statement. We want to say,
if the body id is "news", turn on the button with the class "news".
Got that? Using the same names makes it a bit easier to remember what is what. Next, using the selectors and tags we need to drill through the document asking if this body ID says "news", drill through the main menu in order to find which button has the class "news" and turn it on by giving this button a different background. It's similar to a document object model for all you programmers out there. A mouthful right? Here it is visually...
If you don't completely understand that it's no sweat, neither did I when I first learned it. Just copied and pasted the code and feel free to dig through it's logic later. We already have our classes added for the main menu buttons and an ID for the body. Now, jump into your CSS document and add the following under the styles for the main menu.
body#about #main-menu li.about a,
body#portfolio #main-menu li.portfolio a,
body#news #main-menu li.news a,
body#contact #main-menu li.contact a
{
background: #521508;
}
Just be sure to separate each drill-down line with a comma (,). Except the last line! This will save you a headache later on since it will not work otherwise. If you're still following me, in order to turn on another button in the main menu, simply use that ID in the body tag. For example, if you have a page under the "Portfolio" section of your website, the body will look like...
Now we've shown our visitor's the section they are in so it's time to show which topic under that section they are in as well. You got it, it's time to modify the side menu.
Since we've already used an ID in our body tag in order to turn on the main menu, this time we'll turn on the side menu using a class in the body tag. Let's turn on Topic Three.
You good? Now drop in the ID's into each list item so the stylesheet can find that link.
<ul>
<li id="topic-1"><a href="#">Topic One</a></li>
<li id="topic-2"><a href="#">Topic Two</a></li>
<li id="topic-3"><a href="#">Topic Three</a></li>
<li id="topic-4"><a href="#">Topic Four</a></li>
<li id="topic-5"><a href="#">Topic Five</a></li>
<li id="topic-6"><a href="#">Topic Six</a></li>
</ul>
</div>
Lastly, we need to instruct our stylesheet to find the list item ID and give it a different background essentially turning on the link. Remember to seperate each line with a comma (,) except the last line before the property.
body.topic-2 #page-column li#topic-2 a,
body.topic-3 #page-column li#topic-3 a,
body.topic-4 #page-column li#topic-4 a,
body.topic-5 #page-column li#topic-5 a,
body.topic-6 #page-column li#topic-6 a
{
background: #e9e9df;
}
And here's a graphical representation for all you visual people out there.
All set? Double-check it, download the sample and get on to some PHP goodness.