Activer/désactiver un menu déroulant

Question

Je suis en train de créer un menu déroulant sur mon site. Il glisse sur le clic, mais comment puis-je le configurer pour un autre clic, il va glisser dans?

code source Assez simple en ce moment:

$(document).ready(function() { 
    $("#menuicon").click(function() { 
     $("nav ul, .content").animate({left: "-15%"}, 1000); 
    }); 
}); 

Merci à l'avance! Utilisez le slidetoggle de jquery à la place!

Answer 1

Cochez ce menu déroulant simple.

DEMO http://jsfiddle.net/yeyene/TLtqe/1/

$('a').on('click',function() { 
    if($('#website').css('left')=='0px'){ 
     $('#website').animate({left: '-30%'}, 1000);   
    }else{ 
     $('#website').animate({left:0}, 1000); 
    } 
}); 

Answer 2

! E.g, $(document).ready(function() { $("#menuicon").click(function() { $("nav ul, .content").slideToggle(1000); }); }); au lieu d'animer!

Answer 3

Vous pouvez simplement utiliser la fonction toggle() à la place du clic, mais je ne suis pas un grand fan de bascule. La solution ci-dessous intègre une classe aussi, mais voilà comment je le ferais:

$(document).ready(function() { 
    $("#menuicon").click(function(e) { 
    var menuicon = $(e.target); 

    if (!menuicon.hasClass('open'){ 
     menuicon.addClass('open'); 
     $("nav ul, .content").animate({left: "-15%"}, 1000); 
    } else { 
     menuicon.removeClass('open'); 
     $("nav ul, .content").animate({left: "0"}, 1000); 
    } 
    }); 
}); 

Je voudrais également intégrer une classe « travail » là-bas pour éviter les doubles clics, mais peut être plus que vous avez besoin avec votre projet.

---

EDIT:

petite friandise supplémentaire que j'utiliser un peu, si vous avez des options de menu complexes qui impliquent quelques objets différents (comme une ancre, avec une img et une portée à l'intérieur, ou quelques-uns d'autres éléments), vous pouvez associer e.target avec la fonction jquery 'nearest()' pour être sûr de toujours sélectionner l'ancre et non l'un de ses enfants.

var clicked = $(e.target).closest('a'); 

Ceci est assez utile si vous essayez de chercher aussi des valeurs d'attributs de vos objets vous cliquez dessus, en utilisant cela, vous êtes certain que votre sélection sera toujours le « a » (plutôt que e.target retour un enfant img ou quelque chose), et vous pouvez travailler à partir de là.

Answer 4

Pourriez-vous utiliser quelque chose comme ça?

$(document).ready(function() { 
     $(".nav_button").click(function() { 
     $(".top.mini_nav").slideToggle(); 
     }); 
     }); 

J'utilise ce ici ->DEMO

Et c'est le CSS que j'utilise pour ce bouton

.top.mini_nav { 
display: none; 
top: 20px; 
left: 20px; 
margin-bottom: 60px; 
position: relative; 

} 
.top.mini_nav a:hover { 
background-color: #F8F8F8; 
} 
.nav_button { 
position: relative; 
width: 40px; 
height: 40px; 
left: 40px; 
display: block; 
color: white; 
background-color: #2898F2; 
font-size: 20px; 
font-weight: bold; 
text-align: center; 
line-height: 39px; 
cursor: pointer; 
top: 20px; 
border-radius: 5px; 
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
transform: rotate(90deg); 
} 
.nav_button:hover { 
background-color: #D0A624; 
} 

Vous voudrez probablement quelque chose plus propre - mais cela fonctionne bien jusqu'à présent pour moi.

Answer 5

j'ai réalisé que je devais juste faire une variable qui se fixerait à true/false selon si elle était ouverte.

var open = false; 

$(document).ready(function() { 
    $("#menuicon").click (function() { 
     if (!open){ 
     $(".content, nav ul").animate({left: "-=15%"}, 1000); 
     open = true; 
     } else { 
     $(".content, nav ul").animate({left: "+=15%"}, 1000); 
     open = false; 
     } 
    }); 
}); 

Merci pour toute l'aide les gars!