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 5 of 7 pages « First < 3 4 5 6 7 >
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?
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?
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
Thanks, Kind Regards.
Sioux
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.
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.
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
Is there no way to handle it through css
This menu is perfect:-)
Hi
there have been a number of questions about making the CURRENT menu current. I have used a simple bit of javascript to do this and it works fine:
On each button add the following code within the <a > onclick="makeCurrent(this)"
In the header section of your page put the javascript function:-
<script language="Javascript">
function makeCurrent(vMenu) {
var thisLI=vMenu.parentNode
var thisUL=thisLI.parentNode
var thisChild=thisUL.firstChild;
vMenu.parentNode.id = "current"
while ( thisChild != thisUL.lastChild )
{
if ( thisChild.tagName=="LI" )
{
thisChild.id=""
}
thisChild = thisChild.nextSibling;
}
thisLI.id = "current"
}
</script>
This should work:-
there have been a number of questions about making the CURRENT menu current. I have used a simple bit of javascript to do this and it works fine:
On each button add the following code within the <a > onclick="makeCurrent(this)"
In the header section of your page put the javascript function:-
<script language="Javascript">
function makeCurrent(vMenu) {
var thisLI=vMenu.parentNode
var thisUL=thisLI.parentNode
var thisChild=thisUL.firstChild;
vMenu.parentNode.id = "current"
while ( thisChild != thisUL.lastChild )
{
if ( thisChild.tagName=="LI" )
{
thisChild.id=""
}
thisChild = thisChild.nextSibling;
}
thisLI.id = "current"
}
</script>
This should work:-
#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
why is "voice-family" used here - and why is it used twice - and what does "inherit" mean here?
how can we had horizontal submenu's to this???????
nice menu. my question is very easy.
how do I make this codes work?
I saved the first code as modernbrick.css and the second code as modernbrick.html when i open the html file the design doesnt show. How can I fix that? thank you
Commenting is not available in this weblog entry.
how do I make this codes work?
I saved the first code as modernbrick.css and the second code as modernbrick.html when i open the html file the design doesnt show. How can I fix that? thank you








<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