CSS Menus - Simple Menu

Pre-built in blue/green. Clean and simple. No Images.

Let’s be honest, this menu isn’t anything unique or special… it’s a great starting point for people who are building their first few CSS menu’s. The CSS/XHTML is very clean and easy to understand. There aren’t any images for the menu, so you won’t need to open up Photoshop to customize the menu.

The Menu

FAQ

You can customize this menu to be any color you wish
Entire menu system is less than 1KB
1 css file, 1 html file
Has been tested and works in over 150 broswer/operating system combos
It’s FREE for you to use

Source Code

Check out the source code below or download the zip file containing all necessary html and css. As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
#demo-container{padding:25px 15px 0 15px;margin:0 0 15px 0;background:#67A897;}
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
–>
</style>

HTML

<div id="demo-container">
<ul id="simple-menu">
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home" class="current">Home</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Resources</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Inspiration</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Community Forums</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">About Us</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Contact Us</a></li>
</ul>
</div>

This entry is filed under CSS Menus. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Simple Menu”

Michael Says:
January 16th, 2008 at 1:19 am
It is very good. Thanks for sharing!
Wahab Says:
March 20th, 2008 at 3:10 pm
i this is really a good menu, i am going to use it for my website, but the problem is i can’t get it to the centre.
Could you please help me by telling me how i can put this menu in the centre of the page.

thank you very much and happy easter

Wahab
Denmark
Canadian Free Stuff Guru Says:
March 23rd, 2008 at 5:35 pm
Love this css menu
Thanks!
wowo Says:
April 23rd, 2008 at 8:35 am
Simple and compatible with IE6&7, Win Safari…
tnx for sharing. \m/
13 Styles CSS Menu’s | True Media Concepts Says:
April 25th, 2008 at 4:39 am
[…] Time 4 Bed Menu […]
TomTrottier Says:
May 6th, 2008 at 9:19 pm
The h4 following the menu got centered for some reason. Otherwise, fine.

tOM
0b50657b1591 Says:
May 8th, 2008 at 8:20 pm
0b50657b1591…

0b50657b1591c76571b7…
India Webdesigners Says:
May 10th, 2008 at 11:35 am
Great menu!!
Cody Says:
May 11th, 2008 at 11:34 pm
This one is a great one!!
Barry Sakers Says:
May 12th, 2008 at 9:18 am
Great menu. However when i press a tab always a new windows is opened. I don’t want this.

I want to surf to a new url in the same window. How can I do this?

Kind regards,

Barry

13Styles.com CSS Menus

13styles is all about css menus. The menus are list based, very light-weight, easy to implement, and cross-browser compliant. Some of the css menus are free and some require you to purchase rights to use them.

About | Advertise