I'm trying to build a 'mega nav' only I'm running into some issues when I use a custom scrollbar.
My issue is that the custom scrollbar
adds markup adding overflow hidden to my nav
and as a result the .sub-nav
element becomes hidden.
The only solution I can think of is to add position fixed to the .sub-nav
element and then position it using JavaScript
which very messy and not that reliable.
I've pasted 2 fiddles showing what I mean - I hope these make sense and any advice would be much appreciated!
Thanks
Without Plugin
http://jsfiddle.net/f4qh27n7/11/
With Plugin
http://jsfiddle.net/f4qh27n7/10/
Function to position element
function calcNav(){
if( $('#breadcrumb').length > 0 ){
var b = $('#breadcrumb').offset().top;
var w = $(window).scrollTop();
var x = b - w;
$('.sub-nav').css('top', x);
}
}
calcNav();
var scrollTimeout;
$(window).scroll(function() {
clearTimeout( scrollTimeout );
scrollTimeout = setTimeout( calcNav, 50 );
});
My suggestion would be to move all your sub-nav's out of the demo parent.
I would change the DOM structure to something as:
<div class="mega-nav">
<div class="sub-nav"></div>
<div class="sub-nav"></div>
<div class="sub-nav"></div>
<ul class="parent-cat demo gray-skin">
<li><a href="#">Parent Category</a></li>
<li><a href="#">Parent Category</a></li>
<li><a href="#">Parent Category</a></li>
</ul>
</div>
After changing the DOM structure to the one above you can use index() to target relevant content on hover:
var tid;
$('.sub-nav').hide();
$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseenter", function () {
$('.sub-nav').hide();
clearTimeout(tid);
$($(".sub-nav")[$(this).index()]).show();
});
$('.products-nav').delegate(".parent-cat .viewport .overview > li", "mouseleave", function () {
tid = setTimeout(function () {
$('.sub-nav').hide();
}, 1000);
});
$(".demo").customScrollbar();
Working fiddle
Pretty similar to @Lajon solution.
Just needed a little bit of restructuring: http://jsfiddle.net/8zxq5jas/4/
Kind of what you where looking for?
$(".js-parent-category")
.on("mouseenter", function() {
var target = $(this).attr("data-sub-nav-target");
var element = $("." + target);
element.addClass("active");
})
.on("mouseleave", function() {
var target = $(this).attr("data-sub-nav-target");
var element = $("." + target);
element.removeClass("active");
});
$(".demo").customScrollbar();
<ul class="products-nav btcf">
<li><a href="#">Products</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<!-- Products Mega Nav -->
<div class="mega-nav btcf">
<ul class="parent-cat demo gray-skin scrollable">
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-1">Parent Category 1</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-2">Parent Category 2</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-3">Parent Category 3</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-4">Parent Category 4</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-5">Parent Category 5</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-6">Parent Category 6</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-7">Parent Category 7</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-8">Parent Category 8</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-9">Parent Category 9</a></li>
<li><a href="#" class="js-parent-category" data-sub-nav-target="js-sub-nav-10">Parent Category 10</a></li>
</ul>
<div class="js-sub-nav-1 sub-nav">
<h3>Sub Category 1</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-2 sub-nav">
<h3>Sub Category 2</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-3 sub-nav">
<h3>Sub Category 3</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-4 sub-nav">
<h3>Sub Category 4</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-5 sub-nav">
<h3>Sub Category 5</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-6 sub-nav">
<h3>Sub Category 6</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-7 sub-nav">
<h3>Sub Category 7</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-8 sub-nav">
<h3>Sub Category 8</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-9 sub-nav">
<h3>Sub Category 9</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
<div class="js-sub-nav-10 sub-nav">
<h3>Sub Category 10</h3>
<ul>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
<li><a href="#">Child link</a></li>
</ul>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.