Partage

[RESOLU] Menu Hamburger en HTML/CSS Uniquement

3 décembre 2017 à 19:14:28

Bonjour à tous :)

Je fais appel a votre savoir pour m'aider si jamais c'est possible ..

Je vais essayer de faire rapidos.

Je suis entrain de réaliser un site perso, pour m'exercer.
Et j'aimerais tenter pour les petites résolutions et mobile, d'incorporer un menu hamburger à la place de mon menu de navigation standard...
Uniquement en HTML et CSS, puisque ce sont les deux langage que je maitrise a peu pres.
J'ai commencé JS mais je débute..

J'ai pour mon menu de navigation placé un sous menu (a l'un des élément du menu) qui n'apparait que lorsque le curseur passe sur l'element voulu.


C'est ca qui m'inquiete, j'ai réussi a le faire avec mon menu, mais pas avec mon icone hamburger^^


Tout ce que j'ai réussi à faire pour l'instant, c'est de faire apparaitre mon icone hamburger à partir d'une certaine taille d'écran, tout en faisant disparaitre mon menu navigation.

Mais meme si j'utilise a peu pres la meme technique que pour le sous menu dont je vous ai parlé tout a l'heure, et bien cette fois ca ne fonctionne pas.

Voila donc mon probleme, si jamais quelqu'un a déjà eu ce probleme, ou qu'il connait une technique pour le résoudre, je suis preneur.
Je tiens a préciser au cas ou, que j'ai fais beaucoup de recherche, depuis ce matin car je suis bloqué dessus depuis hier, du coup, recherche google, et compagnie, j'ai meme trouvé des problemes quasi similaire sur ce meme forum, mais jamais rien de bien semblable, ou alors qui faisaient la meme chose que moi, (et eux ca marchait), ou alors avec soit du Java Script, soit du php...

Je vous remercie d'avance pour votre aide.
Bonne soirée a vous tous :)



Si vous voulez, je vous laisse une partie de mon code HTML et CSS pour voir a peu pres

<!-----NAVIGATION // MENU NAV----->
  <nav id="menu_nav">

<!-----HAMBURGER MOBILE----->
     <a href="#">
        <i class="fa fa-bars" aria-hidden="true"></i></a>

<!-----LISTE MENU NAV----->

       <ul id="liste_menu_nav" class="liste_mobile">

          <li><a href="#">WORK</a></li>
          <li><a href="#">COMPETENCE</a>
              <ul>
                 <li><a href="#">HTML</a></li>
                 <li><a href="#">CSS</a></li>
                 <li><a href="#">JAVA SCRIPT</a></li>
                 <li><a href="#">PHP</a></li>
              </ul></li>
           <li><a href="#">ABOUT</a></li>
           <li><a href="#">CONTACT</a></li>

        </ul>

</nav>
Et le code CSS :
@media all and (max-width: 800px) {
    #menu_nav .liste_mobile {
        display: none;
    }

    #menu_nav i {
        display: block;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-size: 1.5em;
    }

    #menu_nav i:target .liste_mobile {
        display: block;
    }
}

-
Edité par SekSap 6 décembre 2017 à 15:08:09

5 décembre 2017 à 1:52:46

Tu ne peux pas faire ça
#menu_nav i:target .liste_mobile {

Ça voudrait dire que .liste_mobile est l'enfant de <i> ALORS que non.

Bon déjà ne fait pas le target sur i mais sur a ça revient au même et c'est plus simple pour la suite.

<a class="iconMenu" href="#">
    <i class="fa fa-bars" aria-hidden="true"></i>
</a>
#menu_nav iconMenu:target .liste_mobile {
    display: block;
}

Maintenant il te manque un sélecteur CSS. tu en as deux pour ceux cas ci : + et ~.

le +, comme ceci :

a + ul  {
    ...
} 

veux dire "À partir de a, appliquer ce css uniquement sur le premier élément ul qui le suit."

le ~(ALTgr + 2 suivi d'un espace), comme ceci :

a ~ ul {
    ...
} 

est bien moins restrictive que le +. Il permet de ciblé tout les ul qui suivent a.
Pour toi c'est le + qu'il te faut.

En espérant t'avoir débloqué.

-
Edité par GuillaumeBo1 5 décembre 2017 à 1:53:45

Un homme azerty en vaut deux.
6 décembre 2017 à 15:06:18

Merci d'avoir pris le temps de me répondre. 


J'avais déjà, grâce à l'aide d'un ami, trouvé la solution.
Finalement utilisé un input type checkbox et ca fonctionne :


<nav id="menu_nav">

                <input type="checkbox" name="test" id="menu_mobile" checked/>

                <!-----HAMBURGER MOBILE----->
                <a href="#" id="aTest">
                    
                    <label for="menu_mobile" id="labelTest"><i class="fa fa-bars" aria-hidden="true" id="hamburgerMenu"></i></label>
                </a>

                <!-----LISTE MENU NAV----->

                <ul id="listeMobile">
                    <li><a href="#header_img">HOME</a></li>
                    <li><a href="#section1">WORK</a></li>
                    <li><a href="#">COMPETENCE</a>
                        <ul>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">JAVASCRIPT</a></li>
                            <li><a href="#">PHP</a></li>
                        </ul>
                    </li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">CONTACT</a></li>

                </ul>

            </nav>
@media all and (max-width: 800px) {

    /*----------------------
    MENU NAV HAMBURGER
-----------------------*/
    #menu_nav i {
        display: block;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-size: 1.5em;
        position: fixed;
        background: #C9C3B3;
        opacity: 0.5;
        position: fixed;
        top: 0;
    }


    #menu_nav ul {
        flex-direction: column;
        text-align: center;
        background-color: rgba(247, 247, 247, 0.6);
    }


    #menu_nav ul li:hover ul {
        display: block;
        background-color: rgba(247, 247, 247, 0.6);
        text-align: center;

    }

    #menu_mobile:checked ~ #listeMobile {
        display: none;
    }
Merci encore pour ton aide :)

Staff 6 décembre 2017 à 16:33:37

Bonjour,

pour mettre ton topic en résolu il ne faut pas changer le titre mais utiliser le bouton en haut à droite :)

-
Edité par Lamecarlate 6 décembre 2017 à 16:33:56

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

[RESOLU] Menu Hamburger en HTML/CSS Uniquement

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown