Возможно, это противоречит правилам, чтобы что-то спросить, но я нахожусь в конце моего троса!Как бы это сделать - Меню анимации
Пожалуйста, смотрите эти изображения.
Мне нужно анимировать подменю спускался, когда о нажатии. Когда нажата кнопка «ОБОРОТ», мне нужно подменю для анимации вниз, а затем поперек.
Какой JQuery я могу использовать для этого?
Надеюсь, это имеет смысл.
Спасибо
Вот демо: http://jsfiddle.net/Yk8bR/1/
я парить, вместо мыши, но вы можете изменить это.
$('#menu ul li').hover(function(){
$(this).find('ul').show(400);
},
function(){
$(this).find('ul').hide(0);
});
HTML (не забудьте якоря)
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>The Company</li>
<li>The Team</li>
</ul>
</li>
<li>Services</li>
</ul>
Вы увидите основные CSS в демо, я не могу возиться с этим.
Спасибо webarto! Это именно то, чего я хочу. Однако, так или иначе, чтобы другие элементы подменю («Команда») стали более гладкими? Компания, похоже, работает нормально, но команда, похоже, просто отображается на экране без угасания – Miles
Да, конечно, мне не нравится .show .hide, вы можете использовать .fadeIn и .fadeOut, вот демонстрационный пример http://jsfiddle.net/Yk8bR/9/ ... вы можете использовать практически любой эффект. http://api.jquery.com/category/effects/ –
Это просто код, так как псевдо нет HTML для работы с:
$(document).ready(function() {
$('.menu-container-selector').children('ul').children('li').click(function() {
if ($(this).find('ul.sub-menu-ul').length > 0) {
$(this).find('ul.sub-menu-ul').animate({'opacity':'1','top':'30px','left':'100px'});
}
});
});
И a jsfiddle.
Можете ли вы предоставить html, который вы используете для пунктов меню? – john
Как насчет ['animating'] (http://api.jquery.com/animate) свойств' width' и 'height'? –