Menu déroulant html / css / js

Question

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 !

Afficher la suite

Chris 94 · Answer

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.

jordane45 · Answer

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

Menu déroulant html / css / js

2 réponses

Votre réponse

Discussions similaires