TODO : gérer les limites droite/gauche de la page.
Markup HTML :
1 2 3 4 5 6 7 8 9 |
<li class="js-facet"> <div class=""> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn-facet"> Shop by Prix<span class="caret"></span> </a> <div class="js-facet-values"> </div> </div> </li> |
Code jQuery :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var facetValuesElement = $('.js-facetnav-refinements .js-facet'); // DO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu var nav_sub_item_width = 370; facetValuesElement.each(function() { var nav_primary_item_width = $(this).outerWidth(); var wanted_value = (nav_sub_item_width / 2) - (nav_primary_item_width / 2); $(this).find('.js-facet-values').css({ 'width': nav_sub_item_width+'px', 'margin-left': -wanted_value }); }); // UNDO: Partie déroulée du dropdown centrée horizontalement par rapport à la largeur du libellé de premier niveau du menu facetValuesElement.each(function() { $(this).attr('style', ''); }); |