Partage
  • Partager sur Facebook
  • Partager sur Twitter

JS pour menu déroulant responsive !

Anonyme
17 septembre 2019 à 22:41:48

(Re) Bonjour à tous !

J'ai posté hier un sujet sur lequel je n'ai pas trouvé de véritable réponse en partie de ma faute car j'ai tout simplement mal organisé et fait mon code...

Voilà je vous explique, je n'y connais absolument rien en JS mais je sais que l'effet que je souhaite réaliser est largement faisable en quelques lignes de JS. J'ai fait un petit menu responsive à 2 phases et j'aimerai tout simplement que quand l'utilisateur clique sur n'importe quelle balise <a>, le menu déroulant (2ème photo) pour le moment statique (évidement il faudrait juste voir la barre orange avec "Menu" affiché quand l'écran passe en dessous de 950px) se referme avec une petite animation pour redevenir à la même taille que le menu>950px et j'aimerai que cet effet se fasse SEULEMENT quand le menu est inférieur à 950px (2ème phase) ce qui est logique...

Menu > 950px :

Menu < 950px :

HTML :

<body>
    <div id="menu">
        <div class="responsive"><a href="#" id="btn_responsive" class="btn">Menu</a></div>
        <ul id="grand">
            <li><a href="#" class="btn">Mon profil</a></li>
            <li><a href="#" class="btn">Bénévoles</a></li>
            <li><a href="#" class="btn">Associations</a></li>
            <li><a href="#" class="btn">NewsLetter</a></li>
            <li><a href="#" class="btn">Mot de passe</a></li>
            <li><a href="#" id="jaune" class="btn">Déconnexion</a></li>
        </ul>
        <ul id="petit">
            <li><a href="#" class="btn">Mon profil</a></li>
            <li><a href="#" class="btn">Bénévoles</a></li>
            <li><a href="#" class="btn">Associations</a></li>
            <li><a href="#" class="btn">NewsLetter</a></li>
            <li><a href="#" class="btn">Mot de passe</a></li>
            <li id="li"><a href="#" id="jaune" class="btn">Déconnexion</a></li>
        </ul>
    </div>
</body>

CSS :

@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');

body{
    margin: 0;
    padding: 0;
    font-family: 'Ubuntu';
}

li{
    list-style-type: none;
    display: inline-block;
    padding: 10px 0;
}

#jaune{
    color: yellow;
}

.btn{
    text-decoration: none;
    color: white;
    padding-right: 10px;
    padding-left: 10px;
}

#menu{
    text-transform: uppercase;
    background: rgb(255, 69, 0);
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-rows: 0;
}

.responsive{
    grid-column: 3;
    text-align: center;
    padding: 0;
}

#btn_responsive{
    display: none;
    padding-top: 10px;
}

#grand{
    grid-column: 2;
    text-align: center;
    margin: 0;
    padding: 0;
}

#petit{
    display: none;
}

#btn_responsive:hover{
    background: rgba(255, 255, 255, 0.3);
    padding: 4px;
    border-radius: 15px;
    border: solid 2px white;
    margin: 3px;
}

.btn:hover{
    background: rgba(255, 255, 255, 0.3);
    padding: 5px;
    border-radius: 15px;
    border: solid 2px white;
}

@media screen and (max-width: 950px){
    #btn_responsive{
        display: grid;
    }
    #grand{
        display: none;
    }
    #petit{
        display: grid;
        grid-column: 2;
        text-align: center;
        padding: 0;
    }
    li{
        padding: 15px 0;
    }
    .btn{
        padding: 0;
    }
    #li{
        padding-bottom: 0;
    }
}

Voilà et petite précision, j'aimerai que l'effet ne soit "actif" ou pris en compte que quand l'écran est inférieur à 950px... (Pour ceux qui ne comprendraient pas ma demande).

PS: J'aimerai éviter d'utiliser Jquery par la même occasion.

Merci d'avance.


-
Edité par Anonyme 17 septembre 2019 à 22:52:00

  • Partager sur Facebook
  • Partager sur Twitter
AbcAbc6
18 septembre 2019 à 1:57:30

Bonjour,

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet :  https://openclassrooms.com/forum/sujet/help-faire-disparaitre-sous-menu-hamburger

Je ferme ce sujet. 

  • Partager sur Facebook
  • Partager sur Twitter