网站菜单栏下拉 [英] Website Menu Bar Drop Down
本文介绍了网站菜单栏下拉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为客户开发网站。对于菜单/导航栏，我为他们创建了一个（他们非常具体）与下拉列表，但有一个问题 - 当你鼠标在其中一个项目下降，它消失 - 检查出这里 http://www.brandonsdesigngroup.com/menu-expamle.html 。
代码，我从google API的调用jquery，然后是javascript，CSS和实际内容（在无序列表中）。
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：
code>< 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 / 25pxArial 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.gifheight =25>< ul id =nav-oneclass =nav>
< li>
< a href =>首页< / 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>人< / 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> BUTLERS OF FAR HILLS< / a>< / li>
< li> 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 / prf further / prf further.html> LEVERAGING PR< / a>< / li>
< / ul>
< / li>
< li>
< a href => CONTACT< / a>
< / li>
< / ul>
解决方案>
问题＃1：菜单在光标可以到达子菜单之前消失。
通常这是由于< li> 标记和subnavigation < ul> 。
例如，添加一个 padding：0 0。在一个像素点之间的间隙将导致导航消失，然后光标才能到达子菜单。 10px; 到 .nav li ，问题就消失了。
您也可以为< li> 设置特定高度， p>
问题＃2：当光标在图像幻灯片上滚动时菜单消失。
对于菜单消失的问题当你到达你的图像幻灯片和菜单碰撞的点，这是由于 z-index 问题。
您应该将 .nav 设置为 z-index：200 （或任何大于100，根据您的幻灯片 - 我试图去舷外）。这将确保它位于画廊之上。
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>
解决方案
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.
这篇关于网站菜单栏下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
