Bon. Changeaons notre fusil d'épaule...
1/ On OUBLIE la classe "openfirst".
-> on supprime dans le CSS et le jQuery ce qu'on avait mis concernant cette class.
2/ on met une classe "active" à la place :
<li class="active"> <!-- Sous-Menu ouvert par defaut !-->
et dans le jQuery (j'ai tout mis : à copier-coller) :
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
| // ------------------------------------------------
// jquery.dropdown.js (depends on: jquery.hoverIntent.js)
// ------------------------------------------------
$.fn.dropdown = function(options)
{
var defaults = {};
var opts = $.extend(defaults, options);
// Apply class=hasSub on those items with children
this.each(function(){
$(this).find('li').each(function()
{
if( $(this).find('ul').length > 0)
{
$(this).addClass('hasSub');
}
});
});
return this;
};
// ------------------------------------------------
// MENU MAIN
$(function(){
var navMainId = '#navMain';
// -------------------
// Calling the jquery dropdown
$(navMainId).dropdown();
// -------------------
//Sous-Menu ouvert par defaut
$(navMainId+' ul > li.active').addClass('open');
$(navMainId+' ul > li.active > ul').slideDown('fast');
// -------------------
// ouverture/fermeture sous-menu (click/touch)
$(navMainId+' ul > li').on( 'click', function(event)
{
event.stopPropagation(); /* important */
$(this).parent().find('li:not(:hover)').removeClass('open');
$(this).toggleClass('open');
$(this).parent().find('li:not(:hover) ul').slideUp('fast');
if( $(this).hasClass('hasSub') )
{
$(this).children('ul').slideToggle('fast');
}
});
// -------------------
// on désactive les liens des Menus AVEC Sous-Menus (obligatoire pour Tablettes TACTILES / Smartphones)
$(navMainId+' > ul > li.hasSub > a').on( 'click', function(event)
{
event.preventDefault();
});
// -------------------
});
// ------------------------------------------------
// Scrollbar si menu plus grand que la hauteur de fenêtre
$(window).on( 'load resize', function(){
var navMainId = '#navMain';
$(navMainId).height( Math.min( $(window).height(), $(navMainId).height() ) ); // A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....
$(navMainId).css( { 'overflow-y':'auto' } );
});
// ------------------------------------------------ |
Et là... c'est Broadway !
Partager