Dynamic Drive CSS Library- Modern Bricks Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

CSS Library: Horizontal CSS Menus: Here

Modern Bricks Menu

Author: Dynamic Drive

This is a modern looking, imageless horizontal menu. The selected menu item merges with the band below it to help it stand out even more. As mentioned, the menu uses no images, making customization a breeze.

Demo:

The CSS:

<style type="text/css">

#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
border-color: #D25A0B; /*Brown color theme*/ 
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/ 
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: bold 11px Verdana;
height: 22px;
background-color: lightyellow;
}

</style>

The HTML:

<div id="modernbricksmenu">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>	
</ul>
<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
</form>
</div>

<div id="modernbricksmenuline">&nbsp;</div>

Code Info

Rate this code:

Date Posted: 05/24/2007

Revision History: None

Usage Terms: Click here

Your Comments (63)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 3 of 7 pages « First < 1 2 3 4 5 > Last »

great stuff but does not display correctly in ie 6. any fixes.

Posted by bucaneerx on 07/24, 03:35 AM

yeah! it is fantastic...

Posted by scarlett on 08/02, 08:37 AM

this is really good.

Posted by scarlett on 08/02, 08:38 AM

This is really nice piece of CSS work! Thanks!

Posted by Manish Pandey on 08/02, 10:37 PM

yes you need to explicitly set that either through hard coding or dynamically.

.How and where did you set id on the clicked list item to current?
<li id="current">Revised</li>
Does that happen automatically or do you need explicitly set that? Please let me know.

Posted by Asha on 08/07, 03:36 AM

how do i make the nav links to flow 100% to stretch to the size of a certain width.....maybe like 800px or 500px

Posted by atiyah on 08/08, 11:22 AM

V. helpful, easy to integrate in Wordpress too!

Posted by BeHE on 08/12, 08:16 AM

this is very good CSS based all browser compatible menu

Posted by saquib on 08/13, 04:58 AM

I just created a design with menu like this and when I came here for code samples you guys already did the exact same navigation that I need. good work :) thx

Posted by Bloganje on 08/16, 08:07 AM

To have the current work correctly you need to change it for every page you put it on. Since each link is in a new list item (li) you need to move the current id around. Or, if you have PHP installed on the server there are simple ways to do that as well so that your menu can just be an include file.

Posted by Matt on 08/19, 06:30 PM

Comment Pages 3 of 7 pages « First < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.