Menu pour mobiles et tablette

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 19 Janvier 2021.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Salut à tous,

    Meilleurs voeux pour cette nouvelle année et surtout bonne santé.

    J'ai le menu ci-dessous :
    Code:
    <nav>
        <ul>
            <li class="full-width">
                <a href="https://www.mon-site.com/lien.html" class="menu_link" title="Lien">Lien</a><i class="fa fa-chevron-down"></i>           
                    <div class="submenu">                                           
                        <div class="full-width-menu-items-right"></div>
                            <div class="full-width-menu-items-left">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <ul class="list-type-1 toggle-list-container2">
                                            <li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page.html" title="Sous menu">Sous menu</a></li>
                                            <li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-2.html" title="Sous menu 2">Sous menu 2</a></li>
                                            <li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-3.html" title="Sous menu 3">Sous menu 3</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>>
                    </div>
            </li>
            <li class="full-width">
                <a href="https://www.mon-site.com/lien-2.html" class="menu_link" title="Lien 2">Lien 2</a><i class="fa fa-chevron-down"></i>           
                    <div class="submenu">                                           
                        <div class="full-width-menu-items-right"></div>
                            <div class="full-width-menu-items-left">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <ul class="list-type-1 toggle-list-container2">
                                            <li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-4.html" title="Sous menu 4">Sous menu 4</a></li>
                                            <li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-5.html" title="Sous menu 5">Sous menu 5</a></li>
                                            <li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-6.html" title="Sous menu 6">Sous menu 6</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>>
                    </div>
            </li>
        </ul>
    </nav>
    
    Et j'ai ce code javascript pour jquery qui permet d'ouvrir et de fermer les sous-menus :
    Code:
        
    $('nav ul li a.menu_link, nav li .fa').on('click', function(e) {
           if(_isresponsive){
               e.preventDefault();
               $(this).parent().find('.submenu').slideToggle();
               $(this).parent().toggleClass('opened');
           }
    });
    
    Avec les écrans non tactiles, les sous-menus s'affichent avec la souris onMouseOver sur les liens "Lien" et "Liens 2".

    Avec les écrans tactiles, il faut toucher les chevrons <i class="fa fa-chevron-down"> pour que les sous-menus s'affichent en dessous.

    Tout cela fonctionne très bien mais je voudrais maintenant qu'avec les écrans tactiles l'on puissent ouvrir et fermer les sous-menus en touchant les liens <a> "Lien" et "Lien 2". Pour l'instant, ça n'ouvre pas les sous-menus mais ça affiche la page qui est dans la balise <a> (soit https://www.mon-site.com/lien.html ou https://www.mon-site.com/lien-2.html).

    Comment faire avec les écrans tactiles pour que les sous-menus s'affichent en-dessous lorsqu'on clique sur les liens <a> "Lien" et "Lien 2" (sans changer de page) ?

    Dans mon code javascript, j'ai ciblé cette ouverture des sous-menus via la class "menu_link" qui est dans la balise <a href="https://www.mon-site.com/lien.html" class="menu_link" title="Lien">Lien</a> mais ça ne fonctionne pas.

    Merci pour votre aide.
     
  2. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Personne n'a d'idée ?

    Ou bien ce n'est pas réalisable ?
     
  3. ABCWEB
    ABCWEB WRInaute passionné
    Inscrit:
    22 Octobre 2015
    Messages:
    1 324
    J'aime reçus:
    173
    remplacer les balises <a> selon si t'es sur bureau ou mobile
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    935
    J'aime reçus:
    15
    Merci pour ta réponse qui m'a aidé.

    J'ai remplacé les liens
    <a href="https://www.mon-site.com/lien.html" class="menu_link" title="Lien">Lien</a><i class="fa fa-chevron-down"></i> par
    <a href="#" class="menu_link" title="Lien">Lien</a><i class="fa fa-chevron-down"></i> pour les écrans tactiles et ça marche :)
     
Chargement...
Similar Threads - Menu mobiles tablette Forum Date
Pourquoi mon menu disparait sur mobile ? Développement d'un site Web ou d'une appli mobile 24 Juin 2022
Une page qui ne figure pas sur un menu Débuter en référencement 11 Avril 2022
Problème avec un menu en ajax via jquery Problèmes de référencement spécifiques à vos sites 6 Février 2022
Menu, liens et maillage du site Débuter en référencement 6 Janvier 2022
Optimisation d'une page : Titre du Site et Menu comment les inclure? Débuter en référencement 13 Septembre 2021
Obfuscation d'un mega menu Techniques avancées de référencement 6 Juillet 2021
Google mobile first index et menu Référencement Google 19 Mars 2021
Ne pas faire apparaître les sous-pages dans le menu : impact sur leur référencement ? Débuter en référencement 21 Février 2021
Position 1 avec menu affiché Référencement Google 4 Janvier 2021
Etanchéité cocon sémantique et liens menus footer Netlinking, backlinks, liens et redirections 25 Octobre 2020
Menu qui disparait en version mobile Développement d'un site Web ou d'une appli mobile 9 Octobre 2020
site menuiserie Demandes d'avis et de conseils sur vos sites 27 Septembre 2020
Lien externe sponsorisé menu/page accueil Wordpress Débuter en référencement 9 Août 2020
Astuce Bootstrap/menu déroulant Demandes d'avis et de conseils sur vos sites 26 Mai 2020
WordPress Menu et catégories multiples (AND et pas OR) Développement d'un site Web ou d'une appli mobile 21 Février 2020
Comment faire une structure en silo avec un menu de navigation ? Référencement Google 4 Février 2020
WordPress Cocon sémantique et CMS : liens menu et footer Référencement Google 18 Novembre 2019
Le menu n'apparait pas dans l'interface Google Ads AdWords 17 Novembre 2019
Conserver ou non le nofollow sur menu Netlinking, backlinks, liens et redirections 9 Octobre 2019
Menu navigation, les tendances? Développement d'un site Web ou d'une appli mobile 20 Septembre 2019