I had been playing around with the menu here for a while now. For a while, it was a very boring, plan bar with absolutely no indication of where you were, and had no rollover states either. I wanted to solve this problem, but while using CSS formatting to achieve the look.
Over the past week, I tinkered with some ideas and finally came up with the look you see now. Here’s how I did it: Each “section” of my site received an id in it’s body tag. For example, my blog section was called: <body and my links page is called: <body You get the idea.
This defined the entire page with a unique id that can be used in my css. After this, I assigned names to each item in my menu (which is nothing more than an unordered list stripped of the bullets and displayed inline): <div <ul> <li blog.”>blog</a></li> <li me.”>about</a></li> <li psuedo-portfolio.”>artwork</a></li> <li personal top ten.”>top ten</a></li> <li of me and other things.”>photos</a></li> <li </ul> </div> As you can see, I gave a unique name to each menu item, such as “nav-links”, etc so that I can match the pages and the menu items later. Now, onto the css!
blog nav-home a, about nav-about a, artwork nav-artwork a, topten nav-topten a, photos nav-photos a, links nav-links a { color: 000 background-color: FFF border-bottom: none } blog nav-home a: hover, about nav-about a: hover, artwork nav-artwork a: hover, topten nav-topten a: hover, photos nav-photos a: hover, links nav-links a: hover { color: FFF background: 666 border-bottom: 1px solid 000 } What was done here is each body id name was matched up with it’s corresponding id for each list item. This way, the color scheme assigned the the menu items would take place ONLY when the above criteria was met. This gives you great flexibility over server-side functions, as you can assign rollover states for the tab you are currently on as well as the others.
Additionally, this gives you great flexibility to add/change the layout/color scheme with very little work. I’m still going to tinker around with the colors and even the behavior of the tabs, but I like they way they look. It’s still a little buggy, but I’ll get it right tonight or tomorrow.