SlideDown jQuery DIV навигации

0

Я пытаюсь получить что-то вроде навигации на следующем сайте для работы. ссылка

До сих пор у меня есть следующий код JSFIDDLE и он работает. Единственная проблема заключается в том, что во второй раз (или циклически перемещаясь по ним) над подменю li новый фоновый div не выпадает снова.

Любые предложения очень ценятся - спасибо

РЕДАКТИРОВАТЬ:

Я упростил демо здесь jsfiddle.net/XLZGP/11 только для основных пунктов меню. Я ищу новый цвет для слайдов, в то время как старый цвет НЕ продвигается вверх.

кода следующим образом

HTML

<header>
<div class="inner-header">
    <nav>
        <ul>
            <li class="parent"> <a href="#" title="bus">bus</a>

                <div class="locations-wrapper">
                    <ul class="sub-menu">
                        <li><a href="#" title="station">station</a>

                        </li>
                        <li><a href="#" title="stop">stop</a>

                        </li>
                    </ul>
                </div>
            </li>
            <li class="parent"> <a href="#" title="train">train</a>

                <div class="locations-wrapper">
                    <ul class="sub-menu">
                        <li><a href="#" title="station">station</a>

                        </li>
                        <li><a href="#" title="stop">stop</a>

                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</div>
<div class="boxes">
    <div class="bus"></div>
    <div class="bus-station"></div>
    <div class="bus-stop"></div>
    <div class="train"></div>
    <div class="train-station"></div>
    <div class="train-stop"></div>
</div>
</header>

JS

var parentList = $('.parent');
var currentTitle;
var currentChildTitle;

parentList.on('mouseover', function () {
    $(this).find('.locations-wrapper').slideDown(400);
    currentTitle = $(this).find('a').attr('title');
    $('.' + currentTitle).addClass('open').slideDown(400);

});

parentList.on('mouseleave', function () {
    $(this).find('.locations-wrapper').slideUp(400);
    $('.boxes').children('div').removeClass('open').slideUp(400);
});

$('.sub-menu').on('mouseover', 'li', function () {
    currentChildTitle = $(this).find('a').attr('title');
    currentChildTitle = currentTitle + '-' + currentChildTitle;
    $('.boxes').children('div').removeClass('open');
    $('.' + currentChildTitle).addClass('open').slideDown(400);
});'
Теги:
slidedown
slideup

3 ответа

0
Лучший ответ

Принимал другой подход и решил динамически создавать слайд-фон div с помощью JS - создавая каждый узел dom, а затем присваивая его dom, ограничивая общее количество произведенных.

Наложение каждого div на следующее. РАБОЧИЙ СПИСОК

var parentList = $('.parent');

// declare variables
var currentChildTitle;
var currentTitle;
var banner;

// setup append div function
function dropBanner(currentTitle) {
    // create the banner variable dom node
    banner = $('<div class="' + currentTitle + '"/></div>');
    // add it to the dom
    $('.boxes').append(banner);
    // animate it
    $('.' + currentTitle).slideDown(300);
}

// setup a function to limit the number of divs appended
function chop() {
    if ($('.boxes div').length > 15) {
        $('.boxes div').eq(0).remove();
    }
}

// listen for mouseover the parent list items
parentList.on('mouseover', function (e) {

    if (!($(this).find('.locations-wrapper').is(':visible'))) {
        $(this).find('.locations-wrapper').slideDown(300);
    }

    // grab the current list item title
    currentTitle = $(this).find('a').attr('title');

    // call dropBanner passing the current list item title 
    dropBanner(currentTitle);
    chop();

});

// listen for mouseleave
parentList.on('mouseleave', function () {
    $(this).find('.locations-wrapper').delay(300).slideUp(300);
    $('.boxes div').delay(300).slideUp(300);
});

// listen for mouseover the submenu list items
$('.sub-menu').on('mouseover', 'li', function (e) {

    // grab the current list item title
    currentTitle = $(this).find('a').attr('title');

    // call dropBanner passing the current list item title 
    dropBanner(currentTitle);
    chop();

    // stop the bubbling up effect to parent list items
    e.stopPropagation();
});
1

Я думаю, что то, что вы ищете, ближе к этому, http://jsfiddle.net/un5ke/1/

var mouseLeft = true;

$('.sub-menu').on('mouseleave', 'li', function () {
    mouseLeft = true;
    setTimeout(function() {
        if (mouseLeft) {
            var toClose = $('.boxes').children('div.open');
            toClose.slideUp();
            toClose.removeClass('open');
        }
    }, 500);
});

$('.sub-menu').on('mouseover', 'li', function () {
    mouseLeft = false;

    currentChildTitle = $(this).find('a').attr('title');
    currentChildTitle = currentTitle + '-' + currentChildTitle;
    var toOpen = $('.' + currentChildTitle);

    if (!toOpen.hasClass('open')){
        var toClose = $('.boxes').children('div.open');

        toOpen.addClass('open').slideDown(400, function completed () {
           $(toClose).slideUp();               
           $(toClose).removeClass('open');
        });
    }
});

Есть несколько вещей, которые я сделал:

  1. Удаленный z-индекс из открытого класса
  2. Добавлена полусекундная задержка в уходе с мыши, так что, если человек замалчивает друг друга, фон не сходит с ума.
  3. Удалили мышь всего меню, потому что это не проблема на данный момент.
  4. Двойная проверка перед открытием, что текущее меню еще не открыто.
  • 0
    спасибо - однако не очень работает как ссылка на сайт, которую я дал. Я упростил демо здесь jsfiddle.net/XLZGP/11 только для пунктов главного меню. Я ищу новый цвет для скольжения, в то время как старый цвет НЕ скользит. как на morganshotelgroup.com
0

У вас mouseleave обработчика mouseleave для ваших пунктов подменю, поэтому, как только они опускаются, они не работают.

Я добавил быструю mouseleave для подменю тоже в скрипке - должен быть стартер для точного эффекта, которого вы хотите достичь:

http://jsfiddle.net/XLZGP/

$('.sub-menu').on('mouseleave', 'li', function () {
    currentChildTitle = $(this).find('a').attr('title');
    currentChildTitle = currentTitle + '-' + currentChildTitle;
    $('.' + currentChildTitle).removeClass('open').slideUp(400);
});
  • 0
    спасибо @ Starscream1984 - это работает, однако я пытаюсь смоделировать эффект наложения, чтобы один цвет перекрывал предыдущий. в настоящее время вы можете увидеть предыдущий цвет, скользящий вверх. Я попытался добавить задержку в микс, но у меня был странный эффект ... не то, что я хотел. jsfiddle.net/XLZGP/1

Ещё вопросы

Сообщество Overcoder
Наверх
Меню