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 2 of 7 pages < 1 2 3 4 > Last »

Simon, you remove the search from the html, it souds like you're editing the CSS style sheet instead.

Posted by Victor on 07/02, 12:27 AM

Could you explain how this works:

}

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

Do I have to set the color for each page or it will be done automatically for "currently selected tab"?

Thank you for helping a novice!

Posted by Vinh on 07/02, 04:40 PM

I can't figure out how to connect the horizontal line to the tab once the div is moved from the bottom to the top, I've trird everything!

Posted by J on 07/06, 04:32 PM

AHA! Take the style out of the first <ul>
style="margin-left: 1px"
And the line connects to the top.

Posted by J on 07/06, 04:39 PM

Remove the style from the first <LI> and the line should connect.

Posted by J2 on 07/06, 04:48 PM

Hi there, is it possible that the menu can be vertical? Also that the selected menu item has different text and background colors? Can anyone please help?

Posted by Brian on 07/06, 05:59 PM

Anyone have any ideas about dynamically changing the id="current" for the currently selected list element?

Posted by K Johnson on 07/09, 02:06 PM

Two people have already asked how current is supposed to reflect the currently viewed tab.

I don't see why you would even include a "current" setting if the menu remains stuck on one tab!

This isn't the only menu where I see the "current" id abused. Nowhere can I find it explained on a single one of these menus.

Does someone have an explanation? Author?

Posted by Slob Jones on 07/15, 03:41 AM

One of the best and simplest menus I have found, and believe you me I have looked and looked...

Well done and thank you - keep up the good work.

Posted by Peter Gilkes on 07/19, 10:13 AM

How do I make it so the boxes get wider and remain one line when I put text in them that is too long for the current set up? Example: When I try to make a tab that says "Employment Opportunities" the second word is put on a second line and it looks wrong. Thanks.

Posted by Nacho on 07/23, 01:35 PM

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