in css by fyd on 21 Feb 2008
Let's use CSS to make a Horizontal Menu. We will be using and styling an unordered list for our menu. There's not a lot to it and the code has comments by each line - so just follow along and you'll have your own menu in no time.
So, make a new .css file and name it style.css - You can use notepad and save the file as .css instead of .txt
Main Container
We start off with our main styling container. In it we will setup styles like the width of our menu - the background color - font size - and tell it we don't want any bullets next to our list items.
/* main container - ul id="menu" */ #menu { margin: 0; /* reset the margins */ padding: 0; /* reset the padding */ width: auto; /* this size depends on your menu */ float: left; /* line things up */ font-size: 1.4em; /* increase the font size a bit */ background: #656565; /* any background color you want */ list-style: none; /* no bullets on our list items */ }
The List Items
Now we will style the list items. If you have items in your menu that aren't linked then this is where you would add any extra formatting for those. Most of the time everything in a menu is linked so all we need to do for our menu is tell it to display our items horizontally.
/* list elements */ #menu li { display: inline; /* make it horizontal */ }
Our Links
Let's style our links. This is where we put in formatting like the color of our links - text decorations - and anything else you want. The padding here is important and is used to give extra space around the words - without it the menu would take the height of just slightly more than the text. The a:visited is added to make the links stay the same color even if the user has already visited a link.
/* style our links */ #menu li a:link, #menu li a:visited { float: left; /* line things up */ color: #ffffff; /* the color of our linked items */ padding: 10px 10px; /* spread it out */ text-decoration: none; /* no underline *//* white border to the right of link */ border-right: 1px solid #ffffff; }
Link Hover
Now we format how the link will look when our mouse hovers over it.
/* style link hover */ /* .active_link class - optional - styles the current pages link */ #menu li a:hover, #menu li a:active, #menu .active_link { text-decoration: none; /* no underline */ /* color to change to when we hover over link */ background: #009900; }
Clear The Left Margin
We had float: left above so we need to clear out the left margin so the rest of our page items will fall under our menu instead of to the right of it.
/* optional - but a good class to have in every stylesheet */ /* we had float:left; above so in order to clear out the left margin and allow elements on our page to start under our menu we should clear the left margin after we creat the menu */ .clearLeft { clear: left; }
The HTML
Open a new HTML file and add a link to our style sheet somewhere within the <head></head> tags.
<head> <link href="sytle.css" rel="stylesheet" type="text/css" media="screen" / > </head>
Within the <body> tags we will setup our menu. Remember we are using an unordered list for our menu.
<!– use an unordered list –> <ul id="menu"> <!– each link goes in a list element –> <!– class active_link would be moved to the link of whatever page you are on –> <!– so if you if this was the About Us page you would move the class="active_link" within the About Us a href –> <li><a href="csshzmenu.html" class="active_link">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> <– clear out left margin - see stylesheet for more info –> <div class="clearLeft"></div>
There you have it - customize it to your liking and add it to your site. Here are the files for download (right-click save as)
THE HTML
THE CSS
Popularity: 12% [?]
