Необычное выпадающее меню

(Ответов: 6, Просмотров: 876)
  1. Banned
    • Регистрация: 14.12.2009
    • Сообщений: 58
    • Репутация: 17
    • Webmoney BL: ?
    Здравствуйте, уважаемые форумчане. Прошу вашей помощи!
    Для начала зацените необычное выпадающее меню на одном из сайтов: http://wowjp.net
    Нажмите на ссылку "Классы Mist of Pandaria" в меню слева. Видите, как оно работает? Выпадающее меню двигает вниз всё остальное.
    Как мне запилить примерно такую же штуку?
    • 0
  2. Студент Аватар для Sky-R
    • Регистрация: 25.03.2013
    • Сообщений: 82
    • Репутация: 21
    • Webmoney BL: ?
    В этом меню используется библиотека jQuery. Простенький скрипт, который обрабатывает событие клика мышью и отображает блок с подпунктами после этого клика. Для самостоятельного написания нужно немного знать jQuery, но в интернете наверняка есть готовые решения.
    • 0
  3. Гуру Аватар для 3s777
    • Регистрация: 09.02.2013
    • Сообщений: 1,417
    • Репутация: 384
    • Webmoney BL: ?
    __http://alt-f4.ru/expanding-menu-by-jquery?page=2 может поможет
    • 1

    Спасибо сказали:

    Skovhow(26.01.2014),
  4. Sapienti sat Аватар для brainix
    • Регистрация: 01.01.2013
    • Сообщений: 1,925
    • Записей в дневнике: 1
    • Репутация: 817
    • Webmoney BL: ?
    • 0
  5. Гуру Аватар для 3s777
    • Регистрация: 09.02.2013
    • Сообщений: 1,417
    • Репутация: 384
    • Webmoney BL: ?
    А необычность где?
    я так понимаю, человек просто впервые с таким столкнулся...
    да, и не все знают, что это называется аккордеоном.
    • 0
  6. Опытный
    • Регистрация: 06.08.2013
    • Сообщений: 307
    • Репутация: 5
    Skovhow, Вот возьмите мою функцию аккордеона
    PHP код:
    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();}); 
    Но при этом здесь нужно предварительно скрыть подпункты меню в css с помощью display:none;
    • 0
  7. Banned
    • Регистрация: 14.12.2009
    • Сообщений: 58
    • Репутация: 17
    • Webmoney BL: ?
    Скачал готовый код на сайте
    _http://siteis.ru/izuchaem-jquery/prostejshij-akkardion
    И по нему сделал своё меню. Всё работает.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Помогите! не работает Выпадающее меню на сайте
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

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры