CSS horizontal menu |
| Written by AnaS | |
|
From this tutorial you will find out how simple is to create awesome horizontal menus for your website using CSS and HTML.
The menu will look like in the picture below: 2. Our menu is actually an unordered list element <ul> styled using CSS. So, in the body section of cssmenu.html put the following HTML code:
<ul> 3. Great now, we have the list, let's stylish it! Go in the HEAD section of your cssmenu.html document and put the next CSS code:
<style type="text/css">
In the code above the ul list-style-type was set to none (so we have no bullet before each list element).
The HTML and CSS complete code is below:
<html> Also checkout our Simple CSS vertical menus tutorial.
written by David Walsh , November 05, 2007
There's still too much code here. I recommend getting rid of all UL/LI code and move the "display:inline;" CSS code into the "a" declaration. Same functionality, less code.
written by Daniel , November 06, 2007
I actually do not agree with you on that one David. Keeping the UL/LI code is a good practice, even tough the same effect could of been achieved without. Its more than usual the time when you have different declarations for UL/LI elements, and its a good practice always declaring their own properties.
written by Adam Risser , November 06, 2007
David: You wouldn't need to declare the "a" as inline since that is its default. You also wouldn't want to remove the list because it is semantically correct.
written by Adina , November 18, 2007
how do you put this menu in the center of your page whitout using a table or a layer if you are using dreamweaver 4?
written by James , November 29, 2007
I couldn't figure out how to get it to align to the center. I thought you could surround the unordered list with < center > but that doesn't really work. How would I adapt this to use some JavaScript to have hidden menus?
written by Daniel , December 21, 2007
If you want to align it in the middle of the page just place a surrounding div outside it and give it the margin property of 0px auto. Also check out our CSS vertical menus tutorial.
written by Rix , April 28, 2008
Hi, I am having a problem with my CSS horizontal menu, it works fine in Firefox but when I open it in IE, the text is no longer evenly spaced (it clumps up together) See code below. Is there a fix so that I get the same effect in IE and Safari as firefox? Cheers, Rick ________________________________________ /* MENU PANEL*/ #topPanel ul{display:inline; width:756px; height:30px; position:absolute; background:#990033; top:0;right:0; margin:70px 0 0; padding:0 0 0 0; border-bottom:1px solid #AEAEAE; background-color: #990033;} #topPanel ul li{float:left; font:12px/30px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;} #topPanel ul li a{width:108px; height:30px; display:block; padding:0; color:#fff; background:#990033; text-decoration:none; text-align:center; margin:0 0 0 0; top:0px; left:0px; right:0px;} #topPanel ul li a:hover{font:14px/30px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal; width:108px; height:30px; text-decoration:none; background:url(img/button.gif) no-repeat 0 0 #FFFFFF; color:#FFFFFF;} #topPanel ul li.active{font:14px/30px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; width:108px; display:block; height:30px; background:url(img/button.gif) no-repeat 0 0 #FFFFFF; color:#fff; text-align:center; margin:0 0 0 0;}
written by Maria , June 15, 2008
Thanks for this tutorial, it helped me creating my own menu with images!
written by Vish , July 25, 2008
Nice one!! Thanks :)
written by Free codes , July 28, 2008
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
written by Paris , August 26, 2008
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
written by Nisha , September 03, 2008
Good. I would like to have a dropdown menu. Can u help me out with it.
written by gogus estetigi , November 18, 2008
For those of you thinking that if they implement this it will eliminate some of the waiting and lines...
written by Burun estetigi , November 29, 2008
Ok, I have an inkling (pun not intended) to modify that book image to the right to say "Schneier on Squid." "The closest the squid industry has to a rock star."
written by burun estetigi , November 29, 2008
Ok, I have an inkling (pun not intended) to modify that book image to the right to say "Schneier on Squid." "The closest the squid industry has to a rock star."
written by u , December 11, 2008
aa to tara bapa ne avadatu hatu
written by egeshi , December 12, 2008
Is there a good tutorial to develop UL/LI CSS menu which is horizontally centered? Thanks!
written by vishal vishwakarma , December 29, 2008
hey i need to create the horizonatal menus in the asp.net1.0 version And how to create the horizonatl menus i don't know can u help me ???
written by Estetik , March 18, 2009
Ok, I have an inkling (pun not intended) to modify that book image to the right to say "Schneier on Squid." "The closest the squid industry has to a rock star."
written by plastik cerrah , April 24, 2009
You?ve got a lot of cool posts here. Really like it. It served to be helpful. Thanks on that.
written by Dekorasyon , May 05, 2009
Who doesn?t? That sh*t is hilarious. I t is a fact that everyone thinks blackface is funny and chuckles (at least a little on the inside) whenever they see it.
written by ?stanbul Özel Hastaneler , June 05, 2009
Great information! Very useful for me. Thanks a lot. The idea is awesome. Congrats.
written by Danthalos , November 11, 2009
Hey all, Is there a way to get the same kind of menu without using CSS ?
written by evden eve nakliyat , November 20, 2009
Who doesn?t? That sh*t is hilarious. I t is a fact that everyone thinks blackface is funny and chuckles (at least a little on the inside) whenever they see it.
written by ChelseaFC Fan , November 21, 2009
nice article! Short and to the point! Do you need more help? Ask now!
|
|
| Last Updated ( Tuesday, 06 November 2007 ) |