Dynamic Drive CSS Library- Modern Bricks Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Modern Bricks Menu

Author: Dynamic Drive

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

It's a good looking menu for having no images. Now all we need is a javascript submenu rollover effect.

Posted by Ron S on 05/28, 07:52 AM

JavaScript??? Just use CSS for the submenu! ;)

Posted by Tom on 05/30, 07:43 AM

Is there a way to make the band be on the top of the menu so that the links look like they are hanging down?

Posted by kkr4500 on 05/30, 01:27 PM

I mean I know that you move the div with the menuline setting to the top, but then it has a small space between the bar and the links.

Posted by kkr4500 on 05/30, 03:48 PM

I love the way this menu works. Now if only we could have a drop down menu version of it also. Hmmm...

Posted by Tauundefinedri on 06/02, 08:54 AM

It should be fairly easy to use the Drop Down tabs script in conjunction with this CSS menu to make it support 1 level of submenus: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

Posted by ddadmin on 06/03, 09:58 AM

How and where did you set id on the clicked list item to current?
<li id="current">Revised</li>
Does that happen automatically or do you need explicitly set that? Please let me know.

Posted by Valentina on 06/13, 03:04 PM

what is the inline style of 1px on the first li for?

Posted by iowamf on 06/22, 05:07 AM

How do you remove the search bar. In the code i says "/*CSS for sample search box. Remove if desired */", but when i remove it, nothing happens.
Anyone who can help me?

Posted by Simon on 06/24, 09:59 AM

To get rid of the form you have to eliminate all #myform elements in the CSS file, and you have to eliminate the <form id="myform> ... </form> elements in the html.

Posted by Anne on 06/27, 02:47 PM

Comment Pages 1 of 7 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.