Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
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:

The HTML:

Code Info

Rate this code:

Date Posted: 05/24/2007

Revision History: None

Usage Terms: Click here

Your Comments (69)

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

The big question with that style, it's how change css to "current" without recreate the menu for each page.
Like i have one usercontrol with my menu, i want use that in all of link page, and for each page set the "current".
Posted by Avelino on 10/10, 09:06 AM
In the html

<form id="myform">
<input type="text" class="textinput" > <input class="submit" type="submit" value="Find" >

In the css

#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;
}

Removing them should remove the search bar completely
Posted by Jake on 10/30, 03:03 PM
Perfect!!!!! 10 points!!!! 5 stars!!!
Posted by JPA Online on 10/31, 06:12 AM
It is very good.I like it!
Posted by wilensky on 11/01, 11:38 PM
Hi,

I have use this menu style use for my site, now I want add an submenu. Can you advise me.

Thanks a lot
Posted by Huan Nguyen on 11/06, 07:24 PM
I love this menu and will be updating my website with it - just one question - is there any way to make the background colour of the menu bar fill the entire width of the screen, regardless of how many or how few entries you have in it?

The links I currently have in the menu on my test site leave it dangling a few pixels from the edge of the page - it would look so much neater to have a solid bar flowing the full width of the page.

Any ideas?
Posted by David Smith on 11/07, 01:26 PM
Can Anyone Please Tell Me How To Change The Code,So That The Tab Showing The Current Page Changes To Show The Page Currently Being Viewed ?

Thanks, Kind Regards.
Sioux
Posted by Sioux Redcloud on 11/18, 10:26 AM
Hello Again Folks,
After a bit of Time, I Got it working :-)
All You Have to do is edit the Code for Each Link on Each Page. It should look like this :-
(for Page1)
<li id="current"><a href="page1.html></a></li>

Then for Page2, It should look like this :-
<li><a href="page1.html></a></li>
<li id="current"><a href="page2.html></a></li>

Then for Page3, It should look like this :-
<li><a href="page1.html></a></li>
<li><a href="page2.html></a></li>
<li id="current"><a href="page3.html></a></li>

You Have to Edit The Code on Each Individual Page,
I Hope This Helps the People who had the same Problem
as Myself.

Heel Veel Liefs,
Sioux Redcloud.
Posted by Sioux Redcloud on 11/18, 06:20 PM
In each page we can add id="current". but what about if we have the options as home (/home), movies (/movies), articles (/articles) etc.... and so many pages inside the folders. but that time we cant add to particular pages. for dynamic pages by programmatically we can find which directory it is and by checking the directory name we can add the id="current"

Is there no way to handle it through css
Posted by Sanjeev on 12/13, 03:06 AM
This menu is perfect:-)
Posted by Norway on 12/13, 01:16 PM

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

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Supported BB codes: [b], [i], [u], [em], [strike], [strong], [pre], [code], and [blockquote].

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below ("previewing" post does not require it):


Copyright 2006-2008 Dynamic Drive Read our Usage Terms before using any of the CSS codes.
Dynamic Drive DHTML and CSS Code Library