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:
    892
    J'aime reçus:
    13
    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:
    892
    J'aime reçus:
    13
    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 113
    J'aime reçus:
    139
    remplacer les balises <a> selon si t'es sur bureau ou mobile
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    892
    J'aime reçus:
    13
    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
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