Я новичок в JQuery и довольно новичок в HTML/CSS, но поскольку я являюсь типом, который учится на основе практического опыта, я создаю веб-сайт практики, когда я изучаю новые вещи , и экспериментировали с элементами, которые я хотел бы в конечном итоге реализовать на подлинном сайте.Bouncing Slide Menu с JQuery
Я пытался создать правильное меню слайдов, которое активируется, когда курсор наводится на элементы меню. Мне удалось вывести меню, чтобы выскочить, но если я переместил курсор вниз в выскользнутое меню, все это начнет подпрыгивать! Я пробовал использовать .stop(), но затем он мигает!
Я нашел вопросы здесь и на других сайтах от людей с очень похожими (если не одинаковыми) проблемами, но я думаю, что не понимаю ни одного ответа, который с ними работал. Мне нужны визуальные эффекты, и ответы вроде «вставить оператор if() {}» меня смущает, потому что я не уверен, куда его поместить. Если я пойду по тому, что мне дает исходный материал (поставьте оператор check/if в нижней функции), он просто сломает код, а затем меню даже не выскальзывает.
Это очень расстраивает, и когда я становлюсь слишком расстроенным (например, через шесть часов), я не могу думать о решении, поэтому, если кто-то может помочь мне найти ошибки в моем коде или дать мне довольно подробный объяснение того, что я мог бы сделать, чтобы исправить эту проблему, и как это началось, я был бы очень признателен.
Я прикрепил JQ, HTML, & CSS. Заранее спасибо.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children(".sub-menu").slideDown(200);
},
function() {
$(this).children(".sub-menu").slideUp(200);
}
);
});nav {
background-color: #000000;
padding:10px 0;
text-align:center;
}
nav li {
margin: 10px;
padding: 0 10px;
display: inline;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav a {
font-size: 30px;
height: 35px;
line-height: 30px;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a:focus,
nav a:active {
color: #ff0000;
}
nav ul li {
display:inline-block;
position:relative;
}
nav li ul {
background-color:#000000;
position:absolute;
left:0;
top:50px;
width:200px;
}
nav li li a {
position:relative;
font-size:25px;
margin:0;
padding:0;
display:block;
}
ul.sub-menu {
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href=""><b>Home</b></a></li>
<li><a href="">About</a></li>
<li><a href="">Inspiration</a></li>
<li class="dropdown"><a href="">Find</a>
<ul class="sub-menu">
<li><a href="">Ebooks</a></li>
<li><a href="">PDFs</a></li>
</ul>
</li>
<li><a href="">News</a></li>
<li class="dropdown"><a href="">Contact Us</a>
<ul class="sub-menu">
<li><a href="">E-mail List</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</li>
<li class="dropdown"><a href="">Extras</a>
<ul class="sub-menu">
<li><a href="">Coming Soon</a></li>
</ul>
</li>
</ul>
</nav>
Какого черта? Это все? CSS? Ради Бога. Ну, это устранило мою проблему. Спасибо, Робизб. – Pyrrly