Ho uno script che aggiunge delle funzioni ad un menu bootstrap:
codice:
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
che però deve essere interrotto quando la finestra si dirimensiona oltre un certo valore. Per fare ciò ho scritto uno script di questo tipo:
codice:
$(document).ready(function() {
// avvio il test
checkSize();
// avvia il test quando si ridimensiona la pagina
$(window).resize(checkSize);
});
//Funzione per verificare il ridimensionamento dello schermo
function checkSize(){
if(window.innerWidth>=768){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
} else {
$(document).ready(function(){
$(".dropdown").stop();
});
}
}
ma non funziona.
Quando stringo la finestra del browser l'effetto sul menu rimane creando mille problemi.