Astuce Bootstrap/menu déroulant

Discussion dans 'Demandes d'avis et de conseils sur vos sites' créé par Nana-Pocket, 26 Mai 2020.

  1. Nana-Pocket
    Nana-Pocket Nouveau WRInaute
    Inscrit:
    25 Mai 2020
    Messages:
    4
    J'aime reçus:
    0
    Bonjour,
    J'ai découvert un "bug" dans MON menu déroulant, fait avec Bootstrap.
    J'ai testé ce menu avec Chrome, Opéra, et Firefox. Le menu fonctionne, dans le sens ou il se déroule et où tous les liens s'ouvrent. Mais, si je l'ouvre sur un mobile, le menu est bien un "hamburger", qui se déroule mais...les liens ne s'ouvrent que sur demande et dans un autre onglet . Je n'ai pas lu ou trouvé une explication, et je me demande s'il faut modifier mon code.

    Voici le code "menu":


    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
    <div class="navbar-header">


    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="en-index.html">Mas Conil</a>
    </div>
    <div class="collapse navbar-collapse" id="custom-collapse">
    <ul class="nav navbar-nav navbar-right">
    <li class="dropdown"><a class="dropdown-toggle" href="en-index.html" data-toggle="dropdown">Home</a>
    <ul class="dropdown-menu">
    <li><a href="de-index.html">Auf Deutsch</a></li>
    <li><a href="index.html">En français</a></li>
    </ul>
    </li>

    <li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html" data-toggle="dropdown">Dining</a>
    <ul class="dropdown-menu">
    <li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Dine" data-toggle="dropdown">Dine</a>
    </li>
    <li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Drink" data-toggle="dropdown">Drink</a>
    </li>
    <li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Cook" data-toggle="dropdown">Cook</a>
    </li>
    <li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Grow" data-toggle="dropdown">Grow</a>
    </li>

    </ul>
    </li>
    <li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html" data-toggle="dropdown">Rooms</a>
    <ul class="dropdown-menu">
    <li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Alzon" data-toggle="dropdown">Alzon</a> </li>

    <li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Bourdic" data-toggle="dropdown">Bourdic</a></li>

    <li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Esquielle" data-toggle="dropdown">Esquielle</a></li>

    <li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Gardon" data-toggle="dropdown">Gardon</a></li>

    <li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Seynes" data-toggle="dropdown">Seynes</a> </li>

    </ul>
    </li>
    </ul>
    </div>
    </div>
    </nav>


    Merci d'avance, c'est vraiment le genre de détail qui me "bouffe" mon énegie de retraitée...
     
  2. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    362
    J'aime reçus:
    18
    Hello,

    Que veux -tu dire par "les liens ne s'ouvrent que sur demande", comme ça je vois pas trop.

    Essaye de jeter un oeil ici : https://mdbootstrap.com/docs/jquery/navigation/navbar/ Réduit ta page pour simuler un écran mobile... Essaye d'adapter selon ton menu le plus proche

    Sinon essaye ici : https://mdbootstrap.com/snippets/jquery/temp/2135143?action=prism_export

    Le Dropdown se trouve sur bootstrap.js... Je ne pense pas que ça vienne de là. tu te souviens pas ou tu l'as recopié ?

    Bonne bonne
    Yule
     
    Nana-Pocket apprécie ceci.
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
    Ce serait plus simple de montrer un exemple live de ton site ou JSFiddle.
     
  4. Nana-Pocket
    Nana-Pocket Nouveau WRInaute
    Inscrit:
    25 Mai 2020
    Messages:
    4
    J'aime reçus:
    0
    Merci d'avoir tenté de comprendre.
    Mon site est le premier que je "construis". Je profite de ma très récente retraite pour me lancer. Et C'est un nouveau monde pour moi. Donc mille excuses pour les termes non adéquats. Voilà, j'attaque.
    J'ai téléchargé un thème Bootstrap, et ce thème fonctionne parfaitement, je l'ai retesté. Le seul changement que j'ai effectué concerne quelques lignes du CSS mais aucunement dans la partie menu.
    Lorsque je touche l'écran du mobile, le menu se déroule. Lorsque je veux ouvrir une autre page je touche la page désirée qui figure dans ce menu. Pas de réaction. Je dois rester plus longtemps sur la ligne du menu que j'ai voulu ouvrir et le choix, entre autres, "ouvrir la page dans un nouvel onglet" apparaît. De plus, comme je n'ai qu'un mobile, j'ai téléchargé sur Opéra et sur Chrome une extension qui me permet de "voir" comment la page se comporte sur un mobile (responsive ou non, images etc...) et j'ai le même problème: la page souhaitée ne s'affiche pas....
    Est-ce un peu plus compréhensible?
    Merci encore.

    Je vais tenter les deux liens, et je reviens pour info.
     
  5. Nana-Pocket
    Nana-Pocket Nouveau WRInaute
    Inscrit:
    25 Mai 2020
    Messages:
    4
    J'aime reçus:
    0
    Merci d'avoir pris le temps de répondre.
    Mon site est en construction, je progresse lentement. Donc, au niveau de mes connaissances, difficile de montrer un exemple live. Car il faut également transférer le CSS et le JS à moins que je fasse erreur..
    Je suis preneuse de toutes les suggestions.
    Merci encore et bonne journée
     
  6. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    362
    J'aime reçus:
    18
    Re,

    Et sur l'exemple utilisé (le téléchargement du thème) ça fait la même problématique ? Si oui,
    Merci de donner le lien du template utilisé, ça nous donnera déjà une idée

    A+
    YUle
     
  7. Nana-Pocket
    Nana-Pocket Nouveau WRInaute
    Inscrit:
    25 Mai 2020
    Messages:
    4
    J'aime reçus:
    0

    Re-Bonjour!
    J'ai visité avec attention vos liens, et j'ai réussi 1. à corriger MON bug et 2. à comprendre.
    En fait, j'ai "surchargé" les balises <li> de mes sous-menus.
    En passant de :
    <li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Gardon" data-toggle="dropdown">Gardon</a></li>
    à
    <li><a href="en-rooms.html#Gardon">Gardon</a></li>
    je peux avoir accès aux pages souhaitées sur le mobile.

    Le thème choisi pour Bootstrap n'avait pas le même menu, j'ai voulu faire LE MIEN, en croyant que j'avais compris, et voilà....

    Encore merci de m'avoir consacré du temps, pour moi, ça valait la peine. Je passe aux détails suivants, et peut-être reviendrais-je si besoin est.
    Bien sûr, lorsque le site sera terminé je vous le soumettrai.
    Bonne fin de semaine
     
Chargement...
Similar Threads - Bootstrap menu déroulant Forum Date
Back end en Bootstrap ! Développement d'un site Web ou d'une appli mobile 17 Août 2019
Personnnalisation des métas et bootstrap Débuter en référencement 22 Novembre 2015
Balise H1/H2/H3 avec page bootstrap Débuter en référencement 30 Avril 2015
Création d'un site internet avec Bootstrap Développement d'un site Web ou d'une appli mobile 27 Mars 2015
Votre avis sur les framework CSS/JS : Bootstrap, Foundation, skeleton.. Développement d'un site Web ou d'une appli mobile 26 Février 2014
bootstrap span longueur row-fluid Développement d'un site Web ou d'une appli mobile 8 Septembre 2013
Bootstrap Débuter en référencement 11 Juillet 2013
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
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice