Menu de navigation pour mobile probleme !

Résolu/Fermé

squaria Messages postés 85 Date d'inscription dimanche 6 novembre 2016 Statut Membre Dernière intervention 27 août 2018 - Modifié par squaria le 26/11/2016 à 21:50
squaria Messages postés 85 Date d'inscription dimanche 6 novembre 2016 Statut Membre Dernière intervention 27 août 2018 - 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;
    }

A voir également:

Menu de navigation pour mobile probleme !
Navigation privée - Guide
Menu déroulant excel - Guide
Chaine tnt gratuite sur mobile - Guide
Windows 11 menu démarrer classique - Guide
Effacer les données de navigation - Guide

1 réponse

Réponse 1 / 1

Utilisateur anonyme
26 nov. 2016 à 22:07

Il faut utiliser les checkbox et label pour faire ceci sans JS.

https://www.sitepoint.com/pure-css-off-screen-navigation-menu/

squaria Messages postés 85 Date d'inscription dimanche 6 novembre 2016 Statut Membre Dernière intervention 27 août 2018
26 nov. 2016 à 22:10

merci je vais tester !

squaria Messages postés 85 Date d'inscription dimanche 6 novembre 2016 Statut Membre Dernière intervention 27 août 2018
Modifié par squaria le 27/11/2016 à 12:07

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

Utilisateur anonyme
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

squaria Messages postés 85 Date d'inscription dimanche 6 novembre 2016 Statut Membre Dernière intervention 27 août 2018
27 nov. 2016 à 15:48

merci beaucoup !

Discussions similaires

Coco chat connexion sur mobile, le tchat est fermé ?

Retrouver mes factures réglo mobile

je peux plus me connecter sur coco.fr

[Navigation Internet] Trace de navigation