Dynamic Drive CSS Library- Inverted Modern Bricks Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Inverted Modern Bricks Menu

Author: Dynamic Drive

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

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

Almost the same except for the location of the bar.. I believe this one is better looking but ultimately the structure of the web site will determine which one to use..

Posted by Özel Ders on 08/20, 08:06 PM

how do we customize the menu selected ie current . is there no way we could get that programmed ie if click is done on a specific link that link gets highlited

Posted by amit on 08/22, 02:18 AM

that's cool ! thanks :)

Posted by Gazete.tk on 10/09, 03:28 AM

I think this version is more suitable to add some vertical submenu options, because the bar is on top. very nice, thanks.

Posted by CaroMelih on 12/02, 01:43 AM

Cooooooooooooooooollll.

Congratulations.

Very nice site.

Posted by eUsaDomain very Cheap Domain on 01/05, 01:04 PM

I am repeating the question posted by Amit..

how do we customize the menu selected ie current . is there no way we could get that programmed ie if click is done on a specific link that link gets highlited

Can someone please help me

Posted by Sat on 01/05, 02:33 PM

To be honest i think this menu is way better than the last one i commented on. As it looks cleaner for some reason, the color is bland so that might be why i like it. To brighter color can be overpowering i guess...

Posted by linkfeads on 02/06, 08:12 AM

when i copy paste the code for this menu. i can easily view it in my browser and it works fine. but the problem is with dreamweaver, when i click on split view or design view it crashes my dreamweaver and closes it all together. can anyone help. is there something in the code thats making it do that. i'm using dreamweaver MX 2004.

thanks.

Posted by asma on 03/27, 03:18 AM

Very nice examples. I have a question though, that I have tried to get working with several of them.

Does anyone know how to get the UL element to center?
So that in the example above, without the search form, the five elements would center themselves on the page without need for left padding.

Thanks in advance.

Posted by edeneye on 03/28, 03:34 PM

Cool for my design page.

Posted by Tutorials Men on 04/02, 01:50 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.