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:
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 »
To have the current work correctly you need to change it for every page you put it on. Since each link is in a new list item (li) you need to move the current id around. Or, if you have PHP installed on the server there are simple ways to do that as well so that your menu can just be an include file.
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>
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>
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.
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.).
Oh, there are four comment pages. i didn't see that... sorry..
Simon, since we all know what they say about assumptions, did you also remove the code for the "search box" in the html?
Excellent good looking menu.. i will use it in one of my domain.. Thanks for such nice stuf..
beautiful. i will use this codes on my site.
thank you.
thank you.
how can I make this menu appear in the center of my page?
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 ?
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 ?










