Здравствуйте, уважаемые форумчане. Прошу вашей помощи!
Для начала зацените необычное выпадающее меню на одном из сайтов: http://wowjp.net
Нажмите на ссылку "Классы Mist of Pandaria" в меню слева. Видите, как оно работает? Выпадающее меню двигает вниз всё остальное.
Как мне запилить примерно такую же штуку?
- 26.01.2014 18:43
- 26.01.2014 18:53
В этом меню используется библиотека jQuery. Простенький скрипт, который обрабатывает событие клика мышью и отображает блок с подпунктами после этого клика. Для самостоятельного написания нужно немного знать jQuery, но в интернете наверняка есть готовые решения.
- 26.01.2014 19:17
__http://alt-f4.ru/expanding-menu-by-jquery?page=2 может поможет
Спасибо сказали:
Skovhow(26.01.2014), - 26.01.2014 19:46
- 26.01.2014 19:49я так понимаю, человек просто впервые с таким столкнулся...А необычность где?
да, и не все знают, что это называется аккордеоном. - 26.01.2014 23:34
- Регистрация: 06.08.2013
- Сообщений: 307
- Репутация: 5
Skovhow, Вот возьмите мою функцию аккордеона
PHP код:Но при этом здесь нужно предварительно скрыть подпункты меню в css с помощью display:none;jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.sub-menu', this).hide();
$('li.expand > .sub-menu', this).show();
$('li.expand > .sub-menu', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('sub-menu') && theElement.is(':visible')) {
if($(parent).hasClass('menu')) {
$('.sub-menu:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('sub-menu') && !theElement.is(':visible')) {
$('.sub-menu:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {$('.menu').initMenu();});
- 27.01.2014 00:59
Скачал готовый код на сайте
_http://siteis.ru/izuchaem-jquery/prostejshij-akkardion
И по нему сделал своё меню. Всё работает.
Тэги топика:
Похожие темы
Темы | Раздел | Ответов | Последний пост |
---|---|---|---|
Помогите! не работает Выпадающее меню на сайте | WordPress | 3 | 30.11.2013 00:44 |
Фиксированное выпадающее меню (не поддается opera) - нужен совет гуру | Web программирование | 6 | 16.11.2013 14:09 |
Помогите сделать выпадающее меню для навигации в DLE | DLE | 1 | 08.04.2012 14:36 |
Помогите сделать выпадающее меню для DLE | Web программирование | 2 | 23.10.2011 15:30 |