HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<p class="desktop">desktop</p> <p class="mobile">mobile</p> <ul class="facet-nav"> <li class="facet-nav-item"> <a class="link level0" href="#">Lorem ipsum</a> <ul class="facet-nav-sublevel is-closed"> <li><a class="link" href="#">one</a></li> <li><a class="link" href="#">two</a></li> </ul> </li> <li class="facet-nav-item"> <a class="link level0" href="#">Dolor</a> <ul class="facet-nav-sublevel is-closed"> <li><a class="link" href="#">three</a></li> <li><a class="link" href="#">four</a></li> <li><a class="link" href="#">five</a></li> <li><a class="link" href="#">six</a></li> </ul> </li> <li class="facet-nav-item"> <a class="link level0" href="#">Sit amet</a> <ul class="facet-nav-sublevel is-closed"> <li><a class="link" href="#">seven</a></li> <li><a class="link" href="#">eight</a></li> <li><a class="link" href="#">nine</a></li> </ul> </li> </ul> <p>Lorem ipsum dolor sit amet ...</p> |
SASS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.facet-nav{ &-item{ > .link{ display: block; } } &-sublevel.is-closed{ display: none; } &-sublevel{ display: block; } } @media screen and (max-width: 767px){ } @media screen and (min-width: 768px){ .facet-nav{ display: table; &-item{ display: table-cell; } } } // skin .facet-nav{ border: 1px solid tomato; padding: 5px; &-item{ > .link{ border: 1px solid tomato; padding: 15px; &.is-active{ background: pink; } } } } @media screen and (max-width: 767px){ .desktop{display: none;} } @media screen and (min-width: 768px){ .mobile{display:none;} .facet-nav{ &-sublevel{ position: absolute; left: 0; width: 100%; background: pink; } } } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
$(document).ready(function(){ var ulFacetNav = $('ul.facet-nav'); var liFacetNavItem = $('li.facet-nav-item'); var aFacetNavItemLevel0Link = $('a.level0'); var facetNavTargetElements = $('ul.facet-nav'); // la navigation ne doit pas se fermer au clic sur ces éléments // on réinitialise le DOM à l'état initial (pour refermer la nav, notamment) function DOMreset(){ ulFacetNav.removeAttr('style'); aFacetNavItemLevel0Link.each(function(){ $(this).removeClass('is-active'); }); $('ul.facet-nav-sublevel').each(function(){ $(this).addClass('is-closed'); }); } // au clic à l'extérieur de la nav, cette dernière se referme $(document).on('click', function(){ DOMreset(); }); // la navigation ne doit pas se fermer au clic sur ces éléments facetNavTargetElements.on('click', function(e){ e.stopPropagation(); }); // vue Mobile (nav accordion) enquire.register("screen and (max-width: 767px)", { match : function() { ulFacetNav.removeClass('is-desktop-nav').addClass('is-mobile-nav'); DOMreset(); liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){ $(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed'); e.preventDefault(); }); }, unmatch : function() {} }); // vue Desktop (nav tabs) enquire.register("screen and (min-width: 768px)", { match : function() { ulFacetNav.removeClass('is-mobile-nav').addClass('is-desktop-nav'); DOMreset(); liFacetNavItem.off('click', '.level0').on('click', '.level0', function(e){ if($(this).hasClass('is-active')){ DOMreset(); } else{ DOMreset(); $(this).toggleClass('is-active').next('ul.facet-nav-sublevel').toggleClass('is-closed'); var getOpenedFacetNavSublevelHeight = $(this).next('ul.facet-nav-sublevel').height(); ulFacetNav.css('margin-bottom', getOpenedFacetNavSublevelHeight); } e.preventDefault(); }); }, unmatch : function() {} }); }); |