Menu déroulant html / css / js
Quentin
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Je cherche à cliquer sur le bouton Menu (class="barre") pour qu'il ouvre mon menu mais je ne sais pas comment faire avec JS si quelqu'un peut m'aider ? il me faudrait juste le JS car la je ne sais pas comment faire.
HTML:
CSS:
(Le CSS n'est pas fini)
JS:
EDIT : Ajout des balises de code !
HTML:
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="Teste.css"> </head> <body> <div class="btn-navigation"> <div class="barre"></div> <div class="barre"></div> <div class="barre"></div> </div> <div class="navigation"> <ul> <li> <a href="">Texte</a> </li> <li> <a href="">Texte</a> </li> <li> <a href="">Texte</a> </li> <li> <a href="">Texte</a> </li> </ul> </div> <script src="http://code.jquery.com/jquery-1.9.0.js"></script> <script src="Teste.js"></script> </body> </html>
CSS:
.btn-navigation{ position: absolute; right: 30px; top: 30px; z-index: 20 } .btn-navigation .barre{ width: 30px; height: 3px; background: #111; margin-top: 3px; cursor: pointer; } .navigation{ position: fixed; right: 0;/*Position du menu*/ padding: 0 30px; background: #333; width: 20%; height: 100%; transform: transform .6s ease-in-out; -webkit-transition: transform .6s ease-in-out; transform: translateY(100%); /*caché*/ -webkit-transform: translateY(100%); } .navigation.isOpen{ transform: translateY(0%); -webkit-transform: translateY(0%); } .navigation ul{ position: absolute; top: 50px; transform: translateY(-50%); -webkit-transform: translateY(-50%); } .navigation ul li{ margin: 10px 0; } .navigation{ color: #fff; text-transform: uppercase; text-decoration: none; font-size: 20px; letter-spacing: .070. font-weight: 800; }
(Le CSS n'est pas fini)
JS:
$(document).ready(function(){ $('btn-navigation').click(function(){ $('navigation').toggleClass('isOpen'); }); });
EDIT : Ajout des balises de code !
A voir également:
- Menu déroulant html / css / js
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Editeur html - Télécharger - HTML
- Supprimer menu déroulant excel - Forum Word