Reputation: 3356
Website Menu Bar Drop Down
I am working on a website for a client. For the menu/navigation bar, I created one for them (they were very specific) with dropdowns, but there is one problem--when you mouse over one of the items on the dropdown, it dissappears--check it out here http://www.brandonsdesigngroup.com/menu-expamle.html.
for the code, I call jquery from google API's, then there is the javascript, the CSS, and the actual content (in an unordered list).
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
CSS:
<style type="text/css">
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
height:20px
}
.nav {
z-index: 100;
position: relative;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font:1.22em/25px "Arial Narrow", Arial, sans-serif letter-spacing:5px;
color: #FFFFFF;
display: block;
padding: 0 10px;
text-decoration: none;
text-style: narrow;
margin-right:26px;
}
.nav li a:hover {
margin-right:26px;
color: #FFFFFF;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
color: #FFFFFF;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
color: #FFFFFF;
height:20px;
background-image: url(menubar/transparent.png);
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
color:#FFFFFF;
background-image:url(menubar/transparent.png);
}
.nav ul {
border-bottom: 0px solid #FFFFFF;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -99999px;
left: 0px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 22px;
}
.nav ul li {
border: 0;
float: none;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-size:10px;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 50px;
margin-bottom: 0px;
width: 130px;
white-space: nowrap;
}
.nav ul a:hover {
color: #FFFFFF;
}
</style>
<style type="text/css">
body {
width: auto;
height: auto;
background-color: #3A2C21;
}
</style>
HTML:
<td background="images/menu_bg.gif" height="25"><ul id="nav-one" class="nav">
<li>
<a href="">HOME</a>
</li>
<li>
<a href="">PROFILE</a>
<ul>
<li><a href="profile/about/about.html">ABOUT</a></li>
<li><a href="profile/people/people.html">PEOPLE</a></li>
<li><a href="profile/services/services.html">SERVICES</a></li>
<li><a href="profile/tradeshow/tradeshow.html">TRADE SHOWS</a></li>
</ul>
</li>
<li>
<a href="portfolio/overview/overview.html">PORTFOLIO</a>
<ul>
<li><a href="portfolio/artistictile/artistictile.html">ARTISTIC TILE</a></li>
<li><a href="portfolio/atlantis/atlantis.html">ATLANTIS</a></li>
<li><a href="portfolio/blanco/blanco.html">BLANCO</a></li>
<li><a href="portfolio/farhills/farhills.html">BUTLER"S OF FAR HILLS</a></li>
<li><a href="portfolio/hampton/hampton.html">HAMPTON FORGE</a></li>
<li><a href="portfolio/hht/hht.html">HILAND H. TURNER</a></li>
<li><a href="portfolio/miele/miele.html">MIELE</a></li>
<li><a href="portfolio/poggenpohl/poggenpohl.html">POGGENPOHL</a></li>
<li><a href="portfolio/thg/thg.html">THG FAUCETS</a></li>
<li><a href="portfolio/topknobs/topknobs.html">TOP KNOBS</a></li>
<li><a href="portfolio/vixenhill/vixenhill.html">VIXEN HILL</a></li>
</ul>
</li>
<li>
<a href="">PUBLIC RELATIONS</a>
<ul>
<li><a href="pr/attention/attention.html">PRESS ATTENTION</a></li>
<li><a href="pr/frankpr/frankpr.html">FRANK PR</a></li>
<li><a href="pr/hits1/hits1.html">HITS</a></li>
<li><a href="pr/hits2/hits2.html">MORE HITS</a></li>
<li><a href="pr/prfurther/prfurther.html">LEVERAGING PR</a></li>
</ul>
</li>
<li>
<a href="">CONTACT</a>
</li>
</ul>
Upvotes: 1
Views: 1945
Answers (3)
Reputation: 2138
Javascript
<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
html Already a Member?
- Login
- Army
- Navy
- Airforce
Upvotes: 1
Reputation: 41561
Problem #1: Menu disappears before cursor can reach submenu.
Usually this is due to a gap between the <li> tag and the subnavigation <ul>. A gap of even one pixel will cause the navigation to disappear before the cursor can reach the submenu.
For instance, add a padding: 0 0 10px; to .nav li in your CSS, and the problem goes away.
You could also set a specific height for the <li> to cover the problem, too.
Problem #2: Menu disappears when cursor runs over the image slideshow.
As to the problem of your menu disappearing when you reach the point where your image slideshow and menu collide, that's due to a z-index problem.
You should set the .nav to have a z-index: 200 (or anything greater than 100, according to your slideshow -- I try to go overboard). This will make sure it sits above the gallery.
Upvotes: 2
Reputation: 19787
I would use the Hover Intent plug-in. It is designed for exactly this kind of usage and helps provide a more robust dropdown.
Upvotes: 0