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

thank you veryy much

Posted by 3d Oyunlar on 01/21, 10:26 AM

real this nice for us , we apply this for our clients

Posted by susara on 01/25, 05:49 AM

Hello there,
That's so cool ...
BUT i have a little (BIIG) problem:
why on the shown webpages (example the included one) the javascripts dosen't work ?
I have some forms in the included pages.
One of them has an ajax named "chainedselects"
(When I select from a <select>, the next <select> would be populated dynamically.)
When I browse to the included html with the dynamic form, it really works. But when I call it by the whole page with this ajax script, it dosen't work any all. The form is displayed, but the selects are not populeted.

Any advice?

Posted by Razvan on 02/25, 09:24 AM

How do I position the menu at the bottom of the page (or 50px up?) I tried putting this in stylesheet but it wouldn't do it... plz help. Under which area would I put the new bottom positioning?

Posted by Jus on 03/15, 10:08 PM

Thank you very very good

Posted by Estetik on 03/23, 04:08 PM

This works really well on the site above.But will not work with any other site I have.
This site is witha different server than the others.Would this make any difference?

Posted by Gell on 04/04, 01:31 AM

Very nice examples. Cool for my design page.

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Think Flick on 06/02, 10:12 PM

Comment Pages 3 of 3 pages « First < 1 2 3

Commenting is not available in this weblog entry.