Menu de navigation pour mobile probleme ! [Résolu/Fermé]

Signaler
Messages postés
85
Date d'inscription
dimanche 6 novembre 2016
Statut
Membre
Dernière intervention
27 août 2018
-
Messages postés
85
Date d'inscription
dimanche 6 novembre 2016
Statut
Membre
Dernière intervention
27 août 2018
-
Bonjour,
j'aimerais faire une nav pour mobile si possible sans js.
pour l'instant j'en suis là :
|fancy]

Vous allez me dire "mais elle est où ? En fait c'est la triple barre en haut à droite. J'aimerait que quand je clique dessus sa m'affiche en dessous du bouton join us le menu tout simplement"

J'ai fait beaucoup de test avec ::after et modifier le placement des balises html.

voici mon code :

html
                    <ul class="niveau1_mob">
                    <li id="nav_mob">
                    <img src="../images/nav_mob.png" alt="triple bar nav" />
                                    <ul class="niveau2_mob">
                                        <li id="home">
                                            <div id="arrow_flex"><a href="../" rel="nofollow noopener noreferrer" target="_blank" class="el_arrow"><span>HOME</span></a><a href="" class=" rel="nofollow noopener noreferrer" target="_blank"el_arrow" id="arrow_mob"><span>↕</span></a></div>
                                                <ul class="niveau3_mob">
                                                    <li><a href="../home/who.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHO ?</span></a></li>
                                                    <li><a href="../home/where.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHERE ?</span></a></li>
                                                    <li><a href="../home/what.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHAT ?</span></a></li>
                                                    <li><a href="../home/how.php" rel="nofollow noopener noreferrer" target="_blank"><span>HOW ?</span></a></li>
                                                    <li><a href="../home/which.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHICH START ?</span></a></li>
                                                </ul>
                                        </li>
                                    <li><a href="../join/" rel="nofollow noopener noreferrer" target="_blank"><span>JOIN US</span></a></li>
                                    <li><a href="../inspiration/" rel="nofollow noopener noreferrer" target="_blank"><span>INSPIRATION</span></a></li>
                                    <li><a href="../contact/" rel="nofollow noopener noreferrer" target="_blank"><span>CONTACT</span></a></li>
                            </ul>
                        </li>
                    </ul>                    </ul>

EDIT:
css

.niveau1_mob
    {
        display: block;
    }
    
    ul ul
    {
        display: none;
    }
    
    nav::after
    {
        content: .niveau1_mob li:hover .niveau2_mob, li:hover .niveau3_mob
    {
        display: block;
    }
    }
    
    #nav_mob
    {
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
    }

1 réponse

Messages postés
1688
Date d'inscription
vendredi 6 mars 2009
Statut
Membre
Dernière intervention
24 septembre 2018
859
Il faut utiliser les checkbox et label pour faire ceci sans JS.

https://www.sitepoint.com/pure-css-off-screen-navigation-menu/
Messages postés
85
Date d'inscription
dimanche 6 novembre 2016
Statut
Membre
Dernière intervention
27 août 2018

merci je vais tester !
Messages postés
85
Date d'inscription
dimanche 6 novembre 2016
Statut
Membre
Dernière intervention
27 août 2018

Bonjour,
J'ai un problème venant de l'affichage de la nav quand j'appuie sur le bouton elle ne veut pas s'afficher alors que j'ai mis un test pour voir d'ou venait le problème et il s'affiche bel et bien quand j'appuie sur le bouton.

Nouveau code :

                <ul id="navigation">
                        <li><div id="arrow_flex"><a href="../" rel="nofollow noopener noreferrer" target="_blank" class="el_arrow"><span>HOME</span></a><a href="" class=" rel="nofollow noopener noreferrer" target="_blank" el_arrow" id="arrow_mob"><span>↕</span></a></div>
                                <ul class="niveau2_mob">
                                            <li><a href="../home/who.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHO ?</span></a></li>
                                            <li><a href="../home/where.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHERE ?</span></a></li>
                                            <li><a href="../home/what.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHAT ?</span></a></li>
                                            <li><a href="../home/how.php" rel="nofollow noopener noreferrer" target="_blank"><span>HOW ?</span></a></li>
                                            <li><a href="../home/which.php" rel="nofollow noopener noreferrer" target="_blank"><span>WHICH START ?</span></a></li>
                                </ul>
                            </li>
                                    <li><a href="../join/" rel="nofollow noopener noreferrer" target="_blank"><span>JOIN US</span></a></li>
                                    <li><a href="../inspiration/" rel="nofollow noopener noreferrer" target="_blank"><span>INSPIRATION</span></a></li>
                                    <li><a href="../contact/" rel="nofollow noopener noreferrer" target="_blank"><span>CONTACT</span></a></li>
                            </ul>
            
                            <input type="checkbox" id="nav-trigger" class="nav-trigger" />
                            <label for="nav-trigger"></label>
            
            <p id="test">test</p>


    .nav-trigger 
    {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    label[for="nav-trigger"] 
    {
        position: absolute;
        right: 15px;
        top: 15px;
        z-index: 2;
        height: 30px;
        width: 30px;
        cursor: pointer;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
        background-size: contain;
    }
    
    #navigation
    {
        display: none;
    }
    
    .nav-trigger:checked ~ #navigation
    {
        display: block;
    }
    
    #test
    {
        display: none;
    }
    
    .nav-trigger:checked ~ #test
    {
        display: block;
    }


Images pour aider

https://www.zupimages.net/up/16/47/qql9.png

et

https://www.zupimages.net/up/16/47/tjt0.png
Messages postés
1688
Date d'inscription
vendredi 6 mars 2009
Statut
Membre
Dernière intervention
24 septembre 2018
859
Normal ton
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
doit se trouver avant ton ul, et non après
Messages postés
85
Date d'inscription
dimanche 6 novembre 2016
Statut
Membre
Dernière intervention
27 août 2018

merci beaucoup !