tessguefen
11/17/2014 - 6:52 PM
Fancy Nav! (Cat Connection) -- Uses toolkit + 1 custom field.
Fancy Nav! (Cat Connection) -- Uses toolkit + 1 custom field.
/* -- Fancy Nav! -- */
.subnav {
background: #fff;
padding: 30px 0 0;
display: none;
position:absolute;
left: 0; right: 0;
box-shadow: 0 5px 10px rgba(0,0,0,.25);
z-index: 100;
margin-top: -25px;
}
.subnav .subcategory-listing ul {
background: #fff;
border: 1px solid #ccc;
margin-bottom: 30px;
padding-left: 0;
}
.subnav .subcategory-listing ul.subkitties {
border: 0;
margin-bottom: 0;
}
.subnav .subcategory-listing li {list-style: none;}
.subnav .subcategory-listing li a {
padding: 5px 10px;
border-left: 5px solid #77c7a6;
display: block;
}
.subnav .subcategory-listing li a:hover {
background: #52a885;
color: #fff;
text-decoration: none;
}
.subnav .subcategory-listing .subkitties li a {padding-left: 20px;}
.subnav .top-subcat-wrap {margin-bottom: 30px; position:relative; max-height: 150px; min-height: 150px;}
.subnav .top-subcat-wrap img {
max-width: 100%;
max-height: 150px;
display: block;
margin: auto;
}
.subnav .subcat-name {
display: block;
text-align: center;
height: 22px;
line-height: 22px;
bottom: -1px;
width: calc(100% - 29px);
position:absolute;
background: rgba(255,255,255,.75);
}<!-- Navigation -->
<div class="navbar bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"><span class="sr-only">Toggle navigation</span><div class="barGroup"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div><span class="menuText">MENU</span></button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav nav-justified">
<li><a href="/cats/new-products.html">New</a></li>
<li><a href="/cats/sleep.html">Sleep</a></li>
<li class="parent"><a href="/cats/eat.html" data-subnav="eat">Eat</a></li>
<li class="parent"><a href="/cats/play.html" data-subnav="play">Play</a></li>
<li class="parent"><a href="/cats/wear.html" data-subnav="wear">Wear</a></li>
<li class="parent"><a href="/cats/litter.html" data-subnav="litter">Litter</a></li>
<li class="parent"><a href="/cats/travel.html" data-subnav="travel">Travel</a></li>
<li class="parent"><a href="/cats/health.html" data-subnav="health">Health</a></li>
<li class="hide-sm parent"><a href="/cats/behavioral.html" data-subnav="behavioral">Behavioral</a></li>
<li class="parent"><a href="/cats/human.html" data-subnav="human">Human</a></li>
</ul>
</nav>
</div>
</div>
<mvt:item name="toolkit" param="sacreate|catSubNavs|eat, play, wear, litter, travel, health, behavioral, human|," />
<mvt:foreach iterator="subNav" array="catSubNavs">
<!-- &mvt:subNav; -->
<mvt:item name="toolkit" param="subcat|ccount|l.all_settings:subNav" />
<mvt:if expr="ccount GT 0">
<div class="subnav" id="subnav-&mvt:subNav;">
<div class="container">
<div class="subcategory-listing col-md-3 col-sm-4">
<ul>
<mvt:foreach iterator="sub_category" array="sub_categories">
<li><a href="/cats/&mvt:sub_category:code;.html">&mvt:sub_category:name;</a></li>
<mvt:item name="toolkit" param="subcat2|ccount2|l.all_settings:sub_category:code" />
<mvt:if expr="ccount2 GT 0">
<ul class="subkitties">
<mvt:foreach iterator="sub_category2" array="sub_categories2">
<li><a href="/cats/&mvt:sub_category2:code;.html">&mvt:sub_category2:name;</a></li>
</mvt:foreach>
</ul>
</mvt:if>
</mvt:foreach>
</ul>
</div>
<div class="col-md-9 col-sm-8">
<mvt:foreach iterator="sub_category" array="sub_categories">
<mvt:item name="customfields" param="Read_Category_Code( l.settings:sub_category:code, 'showImage', l.settings:showImage )" />
<mvt:if expr="l.settings:showImage">
<mvt:item name="toolkit" param="mvassign|subcat_image|" />
<mvt:item name="toolkit" param="cxpc|pcount|l.all_settings:sub_category:code" />
<mvt:if expr="pcount GT 0">
<mvt:foreach iterator="sub_product" array="sub_products">
<mvt:item name="toolkit" param="customimagec|subcat_image|l.all_settings:sub_product:code|main|270|270|1" />
</mvt:foreach>
</mvt:if>
<div class="top-subcat-wrap col-md-4 col-sm-6 col-xs-6">
<a href="/cats/&mvt:sub_category:code;.html">
<mvt:item name="toolkit" param="catimage|bigimage|l.all_settings:sub_category:code" />
<mvt:if expr="g.bigimage">
<img src="&mvt:global:bigimage;" />
<mvt:elseif expr="g.subcat_image">
<img src="&mvt:global:subcat_image;" />
<mvt:else>
<img src="graphics/00000001/images/no-image.png" />
</mvt:if>
<span class="subcat-name">&mvt:sub_category:name;</span>
</a>
</div>
</mvt:if>
<mvt:item name="toolkit" param="subcat2|ccount2|l.all_settings:sub_category:code" />
<mvt:if expr="ccount2 GT 0">
<mvt:foreach iterator="sub_category2" array="sub_categories2">
<mvt:item name="customfields" param="Read_Category_Code( l.settings:sub_category2:code, 'showImage', l.settings:showImage )" />
<mvt:if expr="l.settings:showImage">
<mvt:item name="toolkit" param="mvassign|subcat_image|" />
<mvt:item name="toolkit" param="cxpc|pcount|l.all_settings:sub_category2:code" />
<mvt:if expr="pcount GT 0">
<mvt:foreach iterator="sub_product" array="sub_products">
<mvt:item name="toolkit" param="customimagec|subcat_image|l.all_settings:sub_product:code|main|270|270|1" />
</mvt:foreach>
</mvt:if>
<div class="top-subcat-wrap col-md-4 col-sm-6 col-xs-6">
<a href="/cats/&mvt:sub_category2:code;.html">
<mvt:item name="toolkit" param="catimage|bigimage|l.all_settings:sub_category2:code" />
<mvt:if expr="g.bigimage">
<img src="&mvt:global:bigimage;" />
<mvt:elseif expr="g.subcat_image">
<img src="&mvt:global:subcat_image;" />
<mvt:else>
<img src="graphics/00000001/images/no-image.png" />
</mvt:if>
<span class="subcat-name">&mvt:sub_category2:name;</span>
</a>
</div>
</mvt:if>
<mvt:item name="toolkit" param="subcat3|ccount3|l.all_settings:sub_category2:code" />
<mvt:if expr="ccount3 GT 0">
<mvt:foreach iterator="sub_category3" array="sub_categories3">
<mvt:item name="customfields" param="Read_Category_Code( l.settings:sub_category3:code, 'showImage', l.settings:showImage )" />
<mvt:if expr="l.settings:showImage">
<mvt:item name="toolkit" param="mvassign|subcat_image|" />
<mvt:item name="toolkit" param="cxpc|pcount|l.all_settings:sub_category3:code" />
<mvt:if expr="pcount GT 0">
<mvt:foreach iterator="sub_product" array="sub_products">
<mvt:item name="toolkit" param="customimagec|subcat_image|l.all_settings:sub_product:code|main|270|270|1" />
</mvt:foreach>
</mvt:if>
<div class="top-subcat-wrap col-md-4 col-sm-6 col-xs-6">
<a href="/cats/&mvt:sub_category3:code;.html">
<mvt:item name="toolkit" param="catimage|bigimage|l.all_settings:sub_category3:code" />
<mvt:if expr="g.bigimage">
<img src="&mvt:global:bigimage;" />
<mvt:elseif expr="g.subcat_image">
<img src="&mvt:global:subcat_image;" />
<mvt:else>
<img src="graphics/00000001/images/no-image.png" />
</mvt:if>
<span class="subcat-name">&mvt:sub_category3:name;</span>
</a>
</div>
</mvt:if>
</mvt:foreach>
</mvt:if>
</mvt:foreach>
</mvt:if>
</mvt:foreach>
</div>
</div>
</div>
</mvt:if>
<!-- &mvt:subNav; -->
</mvt:foreach>//Start Fancy Nav ---
function fancyNav() {
// On click of a parent, it will show it's subnav, and hide the others that may already be showing/
subNav = '';
if ($(window).width() >= 991) {
$('.nav > li.parent > a').hover(
function () {
subNav = '#subnav-' + $(this).attr('data-subnav');
$(subNav).addClass('show');
},
function () {
subNav = '#subnav-' + $(this).attr('data-subnav');
$(subNav).removeClass('show');
}
);
$('.subnav').hover(
function (e) {
$(this).addClass('show');
},
function () {
$(this).removeClass('show');
}
);
} else if ($(window).width() >= 767) {
$('.nav > li.parent > a').on('click', function(e){
e.preventDefault();
subNav = '#subnav-' + $(this).attr('data-subnav');
if ($(subNav).hasClass('show')) {
$('.subnav').removeClass('show');
$(subNav).removeClass('show');
} else {
$('.subnav').removeClass('show');
$(subNav).addClass('show');
}
});
}
// If you click outside of the nav, it will go away.
$('html').on('click', function() {
$('.subnav').removeClass('show');
});
// If you click inside the nav, or a parent, it will still show.
$('.nav > li.parent > a, .subnav').on('click', function(e){
e.stopPropagation();
});
}
//End Fancy Nav ---
// Only activate on Tablet + Desktop.
if ($(window).width() >= 767) {
fancyNav();
}
$(window).resize(function() {
if ($(window).width() >= 767) {
fancyNav();
}
});