Я пытаюсь получить что-то вроде навигации на следующем сайте для работы. ссылка
До сих пор у меня есть следующий код 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);
});'
Принимал другой подход и решил динамически создавать слайд-фон 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();
});
Я думаю, что то, что вы ищете, ближе к этому, 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');
});
}
});
Есть несколько вещей, которые я сделал:
У вас mouseleave
обработчика mouseleave
для ваших пунктов подменю, поэтому, как только они опускаются, они не работают.
Я добавил быструю mouseleave
для подменю тоже в скрипке - должен быть стартер для точного эффекта, которого вы хотите достичь:
$('.sub-menu').on('mouseleave', 'li', function () {
currentChildTitle = $(this).find('a').attr('title');
currentChildTitle = currentTitle + '-' + currentChildTitle;
$('.' + currentChildTitle).removeClass('open').slideUp(400);
});