| |
|
|
| | Всем привет. Помогите, пожалуйста, новичку, люди.
Есть такой код:
<html>
<head>
<meta charset="utf-8">
<style>
.submenu {
display: none;
}
li {
cursor: pointer;
}
</style>
<script src="jquery 2.1.1.min.js"></script>
<script>
$(function(){
$("li").hover(
function(event){
$("ul.submenu").css("display","block");
},
function(event){
$("ul.submenu").css("display","none");
}
);
});
</script>
</head>
<body>
<ul class="menu">
<li>menu 1
<ul class="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
</ul>
</li>
<li>menu 2
<ul class="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
</body>
</html>
|
Как сделать так, чтоб при наведении курсора на пункт появлялся нужный подпункт, а не все сразу?
Заранее спасибо. | |
| |
|
|
| |
|
|
| |
для: ubahuba
(19.06.2014 в 10:52)
| | |
$('li').has('ul').hover(function() {
$(this).children().removeClass('submenu');
}, function() {
$(this).children().addClass('submenu');
});
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(19.06.2014 в 11:59)
| | | Спасибо за помощь) | |
| |
|
|
| |
|
|
| |
для: ubahuba
(19.06.2014 в 12:07)
| | | а зачем вообще js в выпадающем меню?? | |
| |
|
|
| |
|
|
| |
для: moonfox
(19.06.2014 в 14:36)
| | | как зачем??? | |
| |
|
|
| |
|
|
| |
для: ubahuba
(19.06.2014 в 14:38)
| | | зайдите в яндекс и поищите по запросу
- выпадающее меню на css
любой сложности выпадающее меню - можно реализовать на чистом css
более того на css3 есть некоторые фишки из серии эффектов | |
| |
|
|
| |
|
|
| |
для: moonfox
(19.06.2014 в 14:43)
| | | далеко не все можно сделать на css. | |
| |
|
|
| |
|
|
| |
для: ubahuba
(19.06.2014 в 14:52)
| | | читайте еще раз)
меню с любым количеством выпадающих элементов - чистый css
тем более ваш пример)
li:hover > ul { display:block; }
все остальные навороты - спецэффекты - да скорее нужен js | |
| |
|
|
| |
|
|
| |
для: ubahuba
(19.06.2014 в 14:52)
| | | Да, можно на чистом CSS сделать выпадающее меню. Правда, мне попадались только версии, которые для IE использовали JS, но это было довольно давно. | |
| |
|
|
| |
|
|
| |
для: confirm
(19.06.2014 в 11:59)
| | | Добрый день. Прошу у Вас еще раз помочь мне. Код страницы тот же, но хочу применить эффект slide(up/down). Но не получается никак выбрать нужный li . Эффект применяется ко всем li. Пожалуйста помогите с выборкой. Вот код:
<html>
<head>
<meta charset="utf-8">
<style>
.submenu {
display: none;
}
li {
cursor: pointer;
}
</style>
<script src="jquery 2.1.1.min.js"></script>
<script>
$(function () {
$("ul > li").mouseover(function () {
$(this).children().slideDown();
});
$("ul > li").mouseout(function () {
$(this).children().slideUp();
});
});
</script>
</head>
<body>
<ul id="menu">
<li>menu 1
<ul class="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
<li>menu 2
<ul class="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Rikone
(23.06.2014 в 11:09)
| | | Ну так вы всем LI и устанавливаете обработчик. А кроме того, что я написал, писать более нечего
$('li').has('ul').hover - это означает - элементам LI, которые имеют дочерний элемент UL установить обработчик...
А уж в обработчике пишите свои эффекты, какие надо | |
| |
|
|
| |
|
|
| |
для: confirm
(23.06.2014 в 11:33)
| | | Здесь :hover уже нет, это рас, и два, эффект применяется ко всем li, а нужно, чтоб применялся только к верхним. | |
| |
|
|
| |
|
|
| |
для: confirm
(23.06.2014 в 11:33)
| | | Все. Огромное спасибо. Дошло наконец-то. | |
| |
|
|
