Dynamic Drive CSS Library- Modern Bricks Menu

CSS Library: Horizontal CSS Menus: Here

Modern Bricks Menu

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

A very nice menu with no images. Adding search form in menu also helped.

Posted by Photoshop Tutorials on 08/08, 11:31 PM

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

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