Я прочитал много примеров, и ни один из них не касается всех моих проблем. У меня есть меню, созданное в Wordpress, в котором элементы LI содержат привязывающие ссылки на контент, который контролируется плагином Data Cycle FX и jQuery. Все работает так, как хотелось бы, за исключением того, что на странице refresh/load я хотел бы определить, какой элемент LI является активным, и чтобы этот элемент находился в пределах видимой области. (Это в основном проблема, если страница перезагружается, так как любой li.active, который не является одним из первых 6 элементов, скрыт.) Я думаю, что мне нужно определить ширину div .sub-navigation и как-то использовать position() или offset() ... но в моих попытках отсутствует метка. Любые советы высоко ценится :-).Центр активного элемента li внутри меню карусели jQuery, использующего Data Cycle FX
Вот мой HTML, показывающий структуру меню:
<body>
<div class="sub-navigation">
<div class="prev">
<a href="#"><</a>
</div><!--end prev-->
<div class="next">
<a href="#">></a>
</div><!--end next-->
<div class="menu-product-pages-container">
<ul class="subnav cycle-slideshow" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-easing="linear" data-cycle-carousel-offset="10"data-cycle-next=".next a" data-cycle-prev=".prev a" data-cycle-slides="li">
<li class="refrigeration-menu"><a href="#refrigeration">Refrigeration</a></li>
<li class="food-prep-menu"><a href="#food-prep">Food Prep</a></li>
<li class="cooking-menu"><a href="#cooking">Cooking</a></li>
<li class="baking-menu"><a href="#baking">baking</a></li>
<li class="warewashing-menu"><a href="#warewashing">Warewashing</a></li>
<li class="storage-menu"><a href="#storage">Storage</a></li>
<li class="food-transport-menu"><a href="#food-transport">Food Transport</a></li>
<li class="ventilation-menu"><a href="#ventilation">Ventilation</a></li>
<li class="serving-lines-menu"><a href="#serving-lines">Serving Lines</a></li>
<li class="conveyors-menu"><a href="#conveyors">Conveyors</a></li>
</ul></div></div><!--.sub-navigation-->
</body>
Вот мой CSS:
.sub-navigation {
width: 100%;
float: left;
}
.subnav {
background: #777;
list-style-type: none;
margin: 0px;
padding-left: 0px;
position: relative;
height: 40px;
overflow-x: hidden;
white-space: nowrap;
}
.subnav li {
display: inline;
line-height: 40px;
padding: 0 30px 0 30px;
}
.subnav li a {
color: #000;
display: block;
font-size: 95%;
text-transform:uppercase;
padding-left: 15px;
}
.active {
background-color: #c32d2e;
}
.prev {
color: #ccc;
float: left;
font-size: 185%;
font-weight: bold;
line-height: 40px;
width: 2%;
height: 39px;
}
.prev a, .next a {
color: #ccc;
display: block;
margin: 5px auto 0 auto;
text-align: center;
text-decoration: none;
width: 98%;
}
.next {
float: right;
font-size: 100%;
font-weight: bold;
line-height: 40px;
width: 2%;
height: 39px;
}
И мой запрос:
$('ul.subnav').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.parent().addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function() {
$($(this).attr('href')).hide();
});
$("html, body").animate({ scrollTop: 0 }, "fast");
// Bind the click event handler
$(this).on('click', 'a', function(e){
$("html, body").animate({ scrollTop: 0 }, "fast");
// Make the old tab inactive.
$active.parent().siblings().removeClass('active');
$active.parent().removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active
$active.parent().addClass('active');
$content.show();
//change url in bar
window.history.pushState($active);
// Prevent the anchor's default click action
e.preventDefault();
});
});
Похоже, функции, аналогичной это должно работать, чтобы центрировать .active элемент в окне просмотра, но что-то не так с моим пониманием/подходом:
function scrollMenu(){
$viewportWidth = $('.subnav').width(),
$activeTab = $('ul').find('li.active'),
$elWidth = $activeTab.width(),
$elOffset = $activeTab.offset();
$('.active').parent().scrollTo(elOffset.left - (elWidth/2) - (viewportWidth/2));
}
Благодарим вас за внимание ... является частью «.menu» добавленного класса в ли? или он должен быть ('li'). menu.hasClass ('active')? –
Это была просто ссылка. Метод hasClass() проверяет, имеет ли какой-либо из выбранных элементов указанное имя класса. В вашем случае это будет «.active» –
gotcha ... Я предполагаю, что помимо того, что я повесил трубку, прокручиваем этот активный элемент в этой бесконечной настройке карусели. Есть идеи? –