Dynamic Drive CSS Library- Inverted Modern Bricks Menu

CSS Library: Horizontal CSS Menus: Here

Inverted Modern Bricks Menu

By popular request, this is an alternate, inverted version of the original Modern Bricks Menu. Markup wise it's slighter smaller than the original version, minus a DIV element.

Demo:

The CSS:

<style type="text/css">

#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 5px solid #D25A0B; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

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

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

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/ 
border-top: 1px solid white;
}

#modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}

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

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

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

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid black;
background-color: lightyellow;
}

</style>

The HTML:

<div id="modernbricksmenu2">
<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>

<br style="clear: left" />

Code Info

Rate this code:

Date Posted: 08/09/2007

Revision History: None

Usage Terms: Click here

Your Comments (13)

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 2 pages < 1 2

very nice, thanks..

Posted by Tekstil Aksesuarları on 04/14, 08:30 AM

It appears to me that it is whichever element has the id of "current"... You can indeed make multiple elements appear selected by choosing to use the same id (we all know that's bad form, right? :)). One way to programmatically change this is to modify it from using the id parameter, make it a standard class and programmatically change the class of the desired element on load. :)

Hope that helps,
Akuta

Posted by akuta on 05/08, 01:44 PM

Comment Pages 2 of 2 pages < 1 2