Dynamic Drive CSS Library- Inverted Modern Bricks Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

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

Thanks for code, but I have a problem with character encoding. How can I set it. I need to edit .js file or .css file? I tried to add a encoding code line in .css and .js, but didn't success. Main page has no problem with encoding but tabbed contents have. Is there any advice or help for this issue.
Thanks

Posted by Oyunlar on 05/21, 01:39 AM

This really help me i have used in on http://www.bangladeshinovels.com/

Thank you.

Posted by Alamin on 06/25, 03:36 AM

great code thanks

Posted by Oyunlar 1 on 09/14, 09:35 PM

thanks for you. very nice

Posted by film on 10/25, 01:57 PM

This is truly a great read for me!! I love the quality information and news your blog provides :) I have you bookmarked to show this to my brother!
Thanks,

Posted by Domain on 10/26, 02:37 AM

http://www.savasoyunlarimiz.com

Posted by Savas Oyunları on 01/21, 09:36 AM

http://www.oyun60.net

Posted by Yeni Oyunlar on 01/21, 10:21 AM

thanksss

Posted by Zombi Oyunları on 01/21, 10:25 AM

Comment Pages 2 of 3 pages < 1 2 3 >

Commenting is not available in this weblog entry.