JK Cool CSS MenuAuthor: JavaScript Kit
A simple yet elegant CSS hover menu. A number of classic CSS techniques are used to realize it. The hover effect is created by setting each menu link (<a>) to "display: block", making the entire link area active and responsive to the "a:hover" pseudo class definition. A box model hack was used so #coolmenu contains two separate widths (170px by default and 164px for IE browsers), since IE adds any padding on top of the existing width definition. Lastly, for the percentage width of each menu link, IE is fed 100% while non IE browsers is fed "auto."
The CSS:
<style type="text/css">
#coolmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 170px;
background-color: #E6E6E6;
}
* html #coolmenu{ /*IE only rule, to negate the padding below IE includes in
menu width.*/
width: 164px;
}
#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}
#coolmenu a:hover{
background-color: black;
color: white;
}
</style>
The HTML:
<div id="coolmenu">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.codingforums.com">Coding Forums</a>
</div>
I've been playing with this menu a bit. When I introduced a line-height,
things got weird on Moz (1.0.2) and NN(7.01);
here's the code:
<html>
<head>
<style type="text/css">
a {
font-family: verdana, helvetica, sans-serif;
font-size: 11pt;
background-color: #000;
color: #fff;
display: block;
padding: 4px;
line-height: 11pt;
}
.Tabs div {
border-bottom: 1px solid #fff;
}
<style>
</head>
<body>
<div class="Tabs">
<div>abc</div>
<div>def</div>
<div>strange</div>
<div>odd</div>
<div>peculiar</div>
<div>weird</div>
<div>deviant</div>
<div>say what?</div>
<div>no comprendo</div>
</div>
</body>
</html>
The bottom borders at some places dissapear in Moz/NN. Changes in lineheight, create changes in which borders show and which don't.
The effect disappears when line-height is in px and not pt. However, effect then returns when text-size is changed in the browser. The effect completely disappears when line-height = normal.
Alan, I would like to point out to you that the problem may be the fact that it is an id. As you hopefully know, with an id, the first tag using that id will get the properties, after that, nothing else gets those properties, so there may also may be a correlation between that and the position of the id coding in CSS, I will test it out to make sure, however this seems it could very well be the problem.
Zut Aleurs, that's fixed it. Obvious with hindsight; thanks Peter.
Try firefox css/html validator for any browser problem.You can download it from firefox exchange i guess.It works great and also interesting for someone who likes to write clean codes like me.That's why i prefer text editor for the coding.
Yes, I love it, although I got a Virus on my Desktop and uninstalled it but haven't put it back on, it's awesome, it's based off the program called Tidy HTML, you should try it out, it does wonders, and really surprises you with some major web sites.
here is another menu rollover image without javascript
#nav a:link
{
background: url(a.jpg) no-repeat;
}
#nav a:visited
{
background: url(a.jpg) no-repeat;
}
#nav a:visited
{
background: url(b.jpg) no-repeat;
}
#nav span
{
display: none;
}
html code=
<div id="nav">
< a href="#"><span>Home</span></a>
< a href="#"><span>News</span></a>
< a href="#"><span>About</span></a>
< a href="#"><span>Contact</span></a>
</div>
How do i get the nodes to expand with subnodes to reveal more links as i have limited space for my menu and would like to tidy it up??
Raj,
There are several examples at http://css.maxdesign.com.au/listamatic2/
Nice looking menu.
Good CSS menu without javascript
Annoucement: I'm looking for a few news posters. Interested?
| CSS Forums: latest threads | Last Post Info |
|---|---|
| Cant design (1) | 05/16/2008 12:28 pm |
| How to show an entire pdf in one div (2) | 05/14/2008 11:07 am |
| Starting A Web Design Business - How Do I Attract Customers? (10) | 05/13/2008 02:37 pm |
| Download.. Pacific Wings multicolor menu (1) | 05/13/2008 03:05 am |
| Check out this website I am working on CRITIQUE. (5) | 05/13/2008 01:20 am |
