Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Помогите пожалуйста с менюшкой JS+CSS

Помогите пожалуйста с менюшкой JS+CSS


     14.05.2014    Стили (CSS), jQuery    2302

вопрос
Всем доброго дня ребята, нужна ваша помощь!
У меня есть горизонтальное меню, она классная, выпадающая на 1 уровень, но мне нужно сделать 2 уровневый, а как ее сделать не допру!
Помогите пожалуйста, вот скрин:
Помогите пожалуйста с менюшкой JS+CSS


Думаю здесь нужно немного поколдовать в CSS и в JS, тому кто реально решит помочь, выдам адрес, где мы сможем в живую поколдовать, отблагодарю!!! Надеюсь не останусь без внимания.

Ответа пока нет


5 комментариев

Longer
Юзер

Longer - 14 мая 2014 16:35 -

Кто решится помочь, оставьте здесь скайп, я свяжусь с вами

Frak
Юзер

Frak - 14 мая 2014 20:43 -

Longer,
Попробую помочь)) creeckman

Longer
Юзер

Longer - 14 мая 2014 22:55 -

Frak, спасибо

Вопрос остается актуальным, неужели у нас здесь нет верстальщиков который смог бы направить, куда копать?

Kolya groza morey
Юзер

Kolya groza morey - 15 мая 2014 09:47 -

Скайп kolyagrozamorey аська 446411079

futbik
Юзер

futbik - 15 мая 2014 13:24 -

Longer,

Зайди http://petscage.ru/ и бери :)

Или вот + CSS уже найдешь с сайта в файле:
http://petscage.ru/wa-data/public/shop/themes/default//default.css

<ul class="m0">
                <li><a href="#">Собаки</a></li>
                <li><a href="#">Кошки</a>
                    <div class="m1">
                        <ul>
                            <li><a href="#">Вольеры</a></li>
                            <li><a href="#"><u>Дрессировка<i></i></u></a>
                                <ul class="m1b">
                                       <li><a href="#">Обучающие игры</a></li>
                                    <li><a href="#">Аксессуары</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Ошейники</a></li>
                            <li><a href="#"><u>Дрессировка<i></i></u></a>
                                <ul class="m1b">
                                       <li><a href="#">Кофейные 5</a></li>
                                    <li><a href="#">Кофейные 8</a></li>
                                </ul>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Птицы</a></li>
                <li><a href="#">Грызуны</a></li>
            </ul>


jQuery(function () {
    var $ = jQuery;
    $('ul.m0 > li').hover(function () {
        $(this).addClass('active2');
        $(this).find('div.m1').show();
    },function () {
        if (!$(this).hasClass('staticActive')) {
            $(this).removeClass('active2');
        }
        $(this).find('div.m1').hide();
        $(this).find('ul.m1b').hide();
    });
    var ulM2Hovered = false;
    $('div.m1 ul > li').hover(function () {
        if ($(this).find('ul.m1b').length > 0) {
            var pos = $(this).prevAll('li').find('ul.m1b').length;
            $(this).parent().find('ul.m1b:eq(' + pos +')').show();
            $(this).addClass('active2');
        }
    },function () {
        if ($(this).find('ul.m1b').length > 0) {
            var self = this;
            window.setTimeout(function () {
                if (!ulM2Hovered) {
                    var pos = $(self).prevAll('li').find('ul.m1b').length;
                    $(self).parent().find('ul.m1b:eq(' + pos +')').hide();
                }
            }, 100)
            $(this).removeClass('active2');
        }
    });
    $('ul.m1b').hover(function () {
        ulM2Hovered = true;
    },function () {
        ulM2Hovered = false;
        $(this).hide();    
    });
});

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх