#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
Я работаю над веб-сайтом для клиента. Для меню / панели навигации я создал для них одну (они были очень специфичными) с выпадающими списками, но есть одна проблема — при наведении курсора мыши на один из элементов выпадающего списка он исчезает — проверьте это здесьhttp://www.brandonsdesigngroup.com/menu-expamle.html .
для кода я вызываю jquery из Google API, затем есть 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:
<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>
Ответ №1:
Проблема № 1: Меню исчезает до того, как курсор достигнет подменю.
Обычно это происходит из-за разрыва между <li> тегом и поднавигацией <ul> . Разрыв даже в один пиксель приведет к исчезновению навигации до того, как курсор сможет добраться до подменю.
Например, добавьте padding: 0 0 10px; to .nav li в свой CSS, и проблема исчезнет.
Вы также могли бы установить определенную высоту для <li> , чтобы тоже решить проблему.
Проблема № 2: Меню исчезает при наведении курсора на слайд-шоу изображений.
Что касается проблемы исчезновения вашего меню, когда вы достигаете точки, где ваше слайд-шоу изображений и меню сталкиваются, это связано с z-index проблемой.
Вы должны установить .nav значение z-index: 200 (или что-нибудь большее 100, в соответствии с вашим слайд-шоу — я пытаюсь перестараться). Это позволит убедиться, что он находится над галереей.
Комментарии:
1. я это исправил, но что будет здесь, если вы продолжите brandonsdesigngroup.com/fa_website/home.html и перейдите в раздел портфолио, чтобы при переходе строка меню исчезла.
2. Это совершенно другая проблема, но я также отмечу это в своем ответе.
Ответ №2:
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
Уже являетесь участником?
- Вход
Стать участником? Подписка
- Армия
- Темно-синий
- Airforce
Ответ №3:
Я бы использовал подключаемый модуль для наведения курсора. Он предназначен именно для такого использования и помогает обеспечить более надежный выпадающий список.