Signaler

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

Posez votre question squaria 34Messages postés dimanche 6 novembre 2016Date d'inscription 27 novembre 2016 Dernière intervention - Dernière réponse le 27 nov. 2016 à 15:48
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;
    }
Afficher la suite 
Utile
+0
moins plus
Il faut utiliser les checkbox et label pour faire ceci sans JS.

https://www.sitepoint.com/pure-css-off-screen-navigation-menu/
squaria 34Messages postés dimanche 6 novembre 2016Date d'inscription 27 novembre 2016 Dernière intervention - 26 nov. 2016 à 22:10
merci je vais tester !
Répondre
squaria 34Messages postés dimanche 6 novembre 2016Date d'inscription 27 novembre 2016 Dernière intervention - 27 nov. 2016 à 11:59
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

http://zupimages.net/up/16/47/qql9.png

et

http://zupimages.net/up/16/47/tjt0.png
Répondre
ZeNairolf 1203Messages postés vendredi 6 mars 2009Date d'inscription 27 novembre 2016 Dernière intervention - 27 nov. 2016 à 14:10
Normal ton
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
doit se trouver avant ton ul, et non après
Répondre
squaria 34Messages postés dimanche 6 novembre 2016Date d'inscription 27 novembre 2016 Dernière intervention - 27 nov. 2016 à 15:48
merci beaucoup !
Répondre
Ajouter un commentaire

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !