How to Make a CSS Menu Bar
June 12th, 2006 by MarkLast week, a friend of mine asked how I made the CSS menu bar on my blog. Though it may seem a bit daunting to those who haven’t been using style sheets, it’s actually very simple. First, I made a list in my HTML:
<div id=”menu”>
<ul id=”navlist”>
<li class=”home”><a href=”/”>Home</a></li>
<li class=”tools”><a href=”/chinese-tools”>Tools</a></li>
<li class=”archives”><a href=”/archives”>Archives</a></li>
</ul>
</div>
Notice that I put the list inside <div> tags. That’s important. It’s also important that the <div> block and the <ul> have IDs, “menu” and “navlist”, in this case. The individual list items don’t need to have classes, though. After adding the above to my HTML, I had to add the following to my style sheet:
/* Horizontal Menu */
#menu {
height: 20px;
margin: 0px 0px 6px;
background: #eec;
}ul#navlist {
margin: 0px -15px 6px -15px;
padding: 0px;
white-space: nowrap;
font-weight: bold;
}#navlist li {
display: inline;
list-style-type: none;
float: left;
padding: 0px 0;
}#navlist a {
padding: 5px 12px;
}#navlist a:link, #navlist a:visited {
color: #246;
background-color: #eec;
text-decoration: none;
}#navlist a:hover {
color: #fff;
background-color: #369;
text-decoration: none;
}
The #menu portion just sets the height and background of the menu, the ul#navlist aligns the list to fit nicely with my layout, #navlist a determines how much space is between each item in my menubar, and #navlist a:hover is what causes the color and the background of each link to change when you hover your mouse over them. Voila, a navigation menu that changes colors when your mouse is over it. Best of all, there’s no Javascript involved. Idrone also uses a very similar CSS menu bar.
:
June 12th, 2006 at 6:51 am
This comment is off-topic and I appologize for that.
Mark, I’m amazed that you found me, since I changed my last name. I guess I forgot to change it on my old blog, though. I took my wife’s last name, mostly because I thought it would be a nice gesture, but also because I like giving the middle-finger to traditional conventions whenever they seem totally arbitrary to me. Several people have commented that my old name seemed more appropriate for my character, but maybe that’s as good a reason to change it as to keep it.
I’ve included a link to my myspace page which should elucidate for you my current life. You might recoginize one or two people in my friends list, like my brother, for instance, but probably no one else. You’ll find that while circumstances have changed a bit, the person has not changed all that much.
A more direct way to keep in touch is through my email, thomas.reasoner@gmail.com, if you’d prefer.
June 12th, 2006 at 8:46 am
Howdy