Menu déroulant html / css / js

Fermé

Quentin - Modifié le 30 déc. 2019 à 17:16
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 30 déc. 2019 à 17:18

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:

<!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
Editeur html - Télécharger - HTML
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide
Canon quick menu - Télécharger - Utilitaires

2 réponses

Réponse 1 / 2

Chris 94 Messages postés 50978 Date d'inscription mardi 8 janvier 2008 Statut Modérateur Dernière intervention 17 février 2023 7 323
30 déc. 2019 à 17:18

Bonjour,

Pour rappel :

Les réponses sont données par des bénévoles, pas par des machines. Il est vivement recommandé d'user des formes minimales de la politesse ("bonjour', "s'il vous plait", "merci d'avance") pour rester dans le cadre de notre charte d'utilisation.

Réponse 2 / 2

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
30 déc. 2019 à 17:18

Bonjour,

Comme en css, en jquery on utiliser le # pour cibler un élément par son id ... et le . (point) pour cibler une class

Discussions similaires

Suppression listes déroulantes

Javascript Arrondi à 2 chiffres après la virgule

les entrées et les sortées

&nbsp ; Quelle Fonction ?

Espace en HTML

Discussions similaires

Newsletters