Sujet Précédent Sujet Suivant

Menu déroulant html / css / js

Fermé
Quentin - Modifié le 30 déc. 2019 à 17:16
jordane45 Messages postés 38238 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 septembre 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:

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 332
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.
0
Réponse 2 / 2
jordane45 Messages postés 38238 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 septembre 2024 4 689
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

0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses