Wednesday, January 9, 2008

iDrone reprint: How to Make a CSS Menu Bar

[This is an iDrone reprint, written by Mark W sometime in 2006; I'm posting it now because I finally got the syntaxhighlighter tool working]

Last 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><a href=”/”>Home</a></li>
<li><a href=”/chinese-tools”>Tools</a></li>
<li><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. 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.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.