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 (69)

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 7 of 7 pages « First < 5 6 7

thanks you very nice.

Posted by Prefabrik on 05/13, 12:59 AM

How would you center this on your page? Thanks

Posted by sarah on 05/13, 12:18 PM

dasgfsdag

Posted by dh on 05/18, 12:39 AM

why does it require the
padding: 5px 10px;
in the #modernbricksmenu a{ ?

Posted by woody on 05/24, 10:59 AM

Just what I was looking for.

Thanks for taking the time to design it.

Posted by Marcus on 05/25, 10:39 AM

Simple css menus with good clean code.

Posted by Ethan on 06/08, 04:05 AM

How to use the rating stars to rate without page refresh ?

Posted by vijay on 06/14, 07:43 AM

thanks for posting the javascript as everyone was asking on how do this..

<script language="Javascript">
function makeCurrent(vMenu) {

var thisLI=vMenu.parentNode
var thisUL=thisLI.parentNode
var thisChild=thisUL.firstChild;

vMenu.parentNode.id = "current"
while ( thisChild != thisUL.lastChild )
{
if ( thisChild.tagName=="LI" )
{
thisChild.id=""
}
thisChild = thisChild.nextSibling;
}
thisLI.id = "current"
}

</script>

Posted by Rick Estrada on 07/05, 08:49 AM

simple design yet elegant..

Posted by philclassifieds on 07/05, 09:45 PM

Comment Pages 7 of 7 pages « First < 5 6 7