2
Привет, ребята, у меня возникают проблемы с указанием действия JQuery SlideToggle на определенные вкладки (текстовые поля). В настоящее время он использует все действие SlideToggle во всем меню. Я хочу, чтобы зеленая скользящая коробка находилась между разделителями на каждой вкладке меню, когда вы наводили курсор на один. Нужна помощь ...JQuery указать поле css
http://jsfiddle.net/jfarr07/yKF65/1/
HTML
<div id="navigation">
<div class="panel"></div>
<ul id="nav">
<li class="nav"><a href="#">HOME</a></li>
<li class="nav"><a href="#">OUR STORY</a></li>
<li class="nav"><a href="#">GALLERY</a></li>
<li class="nav"><a href="#">GIFT REGISTRY</a></li>
</ul>
</div>
CSS
body, html {
padding:0;
margin:0;
background:url(../../Portfolio/images/wood2.png);
}
a:link {
text-decoration:none;
color:#000;
font-family:open-sans, HelveticaNeue, Helvetica Neue Condensed Bold, Helvetica Neue, serif;
}
a:visited {
color:#000;
}
a:hover {
color:#FFF;
}
#navigation {
width:auto;
height:30px;
background:rgba(0, 0, 0, .25);
}
ul#nav {
display:inline;
}
li.nav {
display:inline-block;
margin: 0px 0px 0px 30px;
padding:0px 0px 0px 30px;
position:relative;
}
li~li {
border-left: 1px solid #000000;
}
.panel {
position:absolute;
background:#0F3;
background-size:100%;
height:30px;
display:none;
width:100%;
}
JQuery
<script>
$(document).ready(function() {
$("li.nav").hover(function() {
$("#navigation").find(".panel").stop().slideToggle("fast");
}, function() {
$("#navigation").find(".panel").stop().slideToggle("fast");
});
});
</script>
Они, по существу, должны упасть, как первоначально, но были разделены на вкладки. Не плавать с одной вкладки на следующую горизонтально. – jash
@jash okay Я обновил свой ответ, посмотрю ... –
Я верю, что это больше в css. Когда вы переходите с вкладки на вкладку сейчас быстро, они не имеют функции SlideToggle. Просто появляется – jash