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

Hi

there have been a number of questions about making the CURRENT menu current. I have used a simple bit of javascript to do this and it works fine:

On each button add the following code within the <a > onclick="makeCurrent(this)"

In the header section of your page put the javascript function:-
<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>

This should work:-

Posted by chris on 01/12, 08:55 AM



#modernbricksmenu{

padding: 0;

width: 100%;

background: transparent;

voice-family: "\"}\"";

voice-family: inherit;

}

why is "voice-family" used here - and why is it used twice - and what does "inherit" mean here?

Posted by mostwanted on 01/17, 01:42 AM

how can we had horizontal submenu's to this???????

Posted by jmurph on 02/09, 09:51 PM

nice menu. my question is very easy.
how do I make this codes work?
I saved the first code as modernbrick.css and the second code as modernbrick.html when i open the html file the design doesnt show. How can I fix that? thank you

Posted by fogsy on 02/25, 11:06 PM

page Bookmarked! Thanks!

Shannon
- Pinoy Money Talk

Posted by Shannon on 02/26, 10:37 PM

nice - good looking

Posted by Projektowanie www on 03/20, 03:47 AM

This is a great CSS menu, and I appreciate the simplicity of it. :) Question: How do you elongate the menu boxes so they are of the same size, even if the page menu "names" are not? Please be kind as I'm still learning! Thanks!

Posted by Hailee on 04/03, 03:52 PM

bookmarked also this blog ;)

Berita Harian

Posted by Berita Harian on 05/07, 07:45 AM

a very nice point here..thanks

Posted by Clickbank.com on 05/08, 08:20 AM

nice one here

Clickbank.com

Posted by Clickbank.com on 05/08, 08:22 AM

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