Dynamic Drive CSS Library- Modern Bricks Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 6 of 7 pages « First < 4 5 6 7 >

This is a great CSS menu, and I appreciate the simplicity of it. :) Question: How do you elongate the menu boxes so they are of the same size, even if the page menu "names" are not? Please be kind as I'm still learning! Thanks!

Posted by Hailee on 04/03, 03:52 PM

bookmarked also this blog ;)

Berita Harian

Posted by Berita Harian on 05/07, 07:45 AM

How would you center this on your page? Thanks

Posted by sarah on 05/13, 12:18 PM

why does it require the
padding: 5px 10px;
in the #modernbricksmenu a{ ?

Posted by woody on 05/24, 10:59 AM

Just what I was looking for.

Thanks for taking the time to design it.

Posted by Marcus on 05/25, 10:39 AM

Simple css menus with good clean code.

Posted by Ethan on 06/08, 04:05 AM

How to use the rating stars to rate without page refresh ?

Posted by vijay on 06/14, 07:43 AM

simple design yet elegant..

Posted by philclassifieds on 07/05, 09:45 PM

VERY nice. Would be absoloutly perfect, if i could center the thing. Any ideas?

Posted by Oliver on 12/09, 04:01 PM

To center it, you need to wrap the div id="modernbricksmenu" inside another div id="wrapper".
Create a new style:
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}

Posted by Joey Navarro on 12/10, 04:33 PM

Comment Pages 6 of 7 pages « First < 4 5 6 7 >

Commenting is not available in this weblog entry.