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

The HTML:

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

This is a great menu and i am using it on my wesbite, but is there ANY sub menu...pleassseee!!!!! We neeed it...! :'(

Seriously though, has anyone got one?
Would tis not work? (Changing sources of course)

<script type="text/javascript">

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>
Posted by Ry on 08/21, 04:55 PM
This menu works great but does anyone know how to make the menu auto update the current menu item using Master Pages in VB.NET aspx sites? Otherwise I might have to design a script which build the menu html on the fly based on the current page selected.
Posted by SickPuP on 08/31, 03:15 PM
To remove the searchbar, look in the HTML-code. This "/*CSS for sample search box. Remove if desired */" is only for design the searchbar (color, width/height, etc.).
Posted by Pascal on 09/02, 08:00 AM
Oh, there are four comment pages. i didn't see that... sorry..
Posted by Pascal on 09/02, 08:01 AM
Simon, since we all know what they say about assumptions, did you also remove the code for the "search box" in the html?
Posted by Steve on 09/04, 11:01 PM
Excellent good looking menu.. i will use it in one of my domain.. Thanks for such nice stuf..
Posted by Bala Krishna on 09/05, 01:07 PM
beautiful. i will use this codes on my site.
thank you.
Posted by bali villas on 09/15, 07:19 AM
how can I make this menu appear in the center of my page?
Posted by Ryan on 09/20, 01:25 AM
Has anyone figured out how to dynamically set the current tab with .aspx master pages? c# preferrably?

Come guys, you can't post such a static menu- it's a great menu system using CSS but no-one re-makes every single page now, we all use templates or master pages etc ?
Posted by nath on 10/04, 08:06 AM
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

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

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.