Menu

Navbar: menu déroulant

depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 26 mai 2018 à 15:49 - Dernière réponse : Hydr0s 1644 Messages postés lundi 24 janvier 2011Date d'inscription 30 août 2018 Dernière intervention
- 11 juin 2018 à 20:24
Bonjour,

J'ai acheté un template à modifier qui a déjà une navbar qui me plait. Seulement elle n'a pas de menu déroulant pour mes sous-menus.

Quelqu'un peut-il m'aider non pas à créer un menu déroulant mais à modifier celui existant svp ?

Mon code HTML est celui-ci:

</head>
<body>
<div class="preloader">
<div class="preloader-body"><i class="wf-preloader"><i class="wf-preloader__inner"></i></i></div>
</div>
<div class="page">
<header>
<nav
class="navbar navbar-default bootsnav navbar-fixed-top header-light bg-transparent nav-box-width white-link navbar-mobile">
<div class="container nav-header-container">
<div class="row">
<div class="col-md-2 col-xs-5"><a class="logo" href="index.html" title="eai-consulting"><img class="logo-dark" alt=""><img
class="logo-light default" src="images/logo-white.png" alt=""></a></div>

<div class="col-md-7 col-xs-2 width-auto pull-right accordion-menu">
<button class="navbar-toggle collapsed pull-right" type="button" data-toggle="collapse"
data-target="#navbar-collapse-toggle-1"><span class="sr-only">toggle navigation</span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="navbar-collapse collapse pull-right" id="navbar-collapse-toggle-1">
<ul class="nav navbar-nav navbar-left panel-group no-margin text-font-sec text-bold">

<li><a class="inner-link" href="#home" title="Présentation de la Société EAI Consult">Accueil</a></li>
<li><a class="inner-link" href="#about" title="Qui sommes-nous ?">À propos</a></li>
<li><a class="inner-link" href="#people" title="Les hommes">Les hommes</a></li>
<li><a class="inner-link" href="#people" title="Nos prestations">Prestations</a>
<ul>
<li> <a href="comprendre.html" title="Création de Sites Internet">Création de Sites Internet</a> </li>
<li> <a href="lexique" title="Création de logiciels/software">Création de logiciels/software</a> </li>
<li> <a href="glossaire" title="Méthodologie de Business">Méthodologie de Business</a> </li>
<li> <a href="comprendre.html" title="Marketing: mise en place de campagne de télémarketing">Marketing: mise en place de campagne de télémarketing</a> </li>
<li> <a href="lexique" title="Identité visuelle: création de supports papiers et autres">Identité visuelle: création de supports papiers et autres</a> </li>
<li> <a href="glossaire" title="Téléphonie">Téléphonie</a> </li>
<li> <a href="comprendre.html" title="Pour nous comprendre">Comprendre</a> </li>
<li> <a href="lexique" title="Lexique des mots informatiques">Lexique</a> </li>
<li> <a href="glossaire" title="Glossaire des mots courants">Glossaire 2017</a> </li>
</ul>
</li>

<li><a class="inner-link" href="#contacts" title="Nos clients">Clients</a></li>
<li><a class="inner-link" href="#contacts" title="Contactez-nous">Contact</a></li>
<li><a class="inner-link" href="index-english.html" title="English version"><img src="images/english2.jpg" alt=""></a></li>
</li>

</ul>
</div>
</div>
</div>
</div>
</nav>
</header>


Mon css est ici:
eai-consult.com/css/style.css

Comment puis-je modifier ma feuille de style pour que le menu déroulant apparaisse sans modifier le style du menu ?

Merci beaucoup pour votre aide :)


Afficher la suite 

Votre réponse

16 réponses

Hydr0s 1644 Messages postés lundi 24 janvier 2011Date d'inscription 30 août 2018 Dernière intervention - 26 mai 2018 à 17:31
0
Merci
Salut,

A priori, ton template est basé sur du bootstrap 3.0, pas 4, la syntaxe est différente, et tu as donc accès à toutes les fonctionnalités et plugins. Essaye avec ceci : https://getbootstrap.com/docs/3.3/components/#dropdowns

Le concepteur du template pourra surement te renseigné, surtout si le template est payant...
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 26 mai 2018 à 17:42
Merci Hydr0s, mais c'est du JavaScript du coup ?
J'ai émis un ticket hier auprès du concepteur mais pas de réponse pour l'instant...
Hydr0s 1644 Messages postés lundi 24 janvier 2011Date d'inscription 30 août 2018 Dernière intervention - 26 mai 2018 à 17:48
Il faut juste modifier le code html et rajouter les class au bon endroit. Le code css et le javascript devrait déjà être inclus
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 26 mai 2018 à 18:23
J'ai testé mais ça modifie les boutons du menu...
Commenter la réponse de Hydr0s
bg62 22942 Messages postés samedi 22 octobre 2005Date d'inscriptionModérateurStatut 19 septembre 2018 Dernière intervention - 27 mai 2018 à 14:59
0
Merci
il te faut en premier travailler sur une basse saine, passe ton css ici :
https://jigsaw.w3.org/css-validator/
"Résultats de la validation W3C CSS de TextArea (CSS niveau 3 + SVG)
Désolé ! Les erreurs suivantes ont été trouvées : (30)
Avertissements (4442)"
.... ensuite ....
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 30 mai 2018 à 18:36
Oui je sais bg62, mais le template que j'ai acheté a un code assez pourri....
Toujours est-il que le menu est sympa mais sans bouton et sans sous menus
J'aimerais garder le même style de menu mais en ajoutant des sous-menus
Qu'en penses tu ?
Commenter la réponse de bg62
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 6 juin 2018 à 17:31
0
Merci
Bonjour les gars,

J'ai réussi à mettre mon dropdown, enfin. Mais il ne fonctionne que sur les ordis, pas sur les smartphones grrr

J'ai fait ce code là:

<li class="dropdown simple-dropdown">
<a class="inner-link" href="prestations.html" title="Les activités dans lesquelles nous intervenons">Prestations</a>
<i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-hidden="true"></i>
<!-- Dropdown menu -->
<ul class="dropdown-menu" role="menu">
<!-- Dropdown menu item-->

<li> <a href="sites-internet.html" title="Création de Sites Internet">Création de Sites Internet</a> </li>
<li> <a href="creation-software.html" title="Création de logiciels/software">Création de logiciels/software</a> </li>
</ul>
</li>


Je ne sais pas si vous pouvez regarder sur le site et m'apporter votre aide...? Merci :)
eai-consult.com

Hydr0s 1644 Messages postés lundi 24 janvier 2011Date d'inscription 30 août 2018 Dernière intervention - 9 juin 2018 à 11:34
Je sèche total, c'est une ancienne version de bootstrap... En bidouillant un peu, on peut arriver à ce que le dropdown fonctionne. Sinon,
btn
à la place du
<a>
mais il faut refaire tout le css derrière...
 <li class="dropdown simple-dropdown">
<a class="inner-link dropdown-toggle" data-toggle="dropdown" title="Les activités dans lesquelles nous intervenons" href="#">Prestations</a>
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 10 juin 2018 à 16:19
Mais non c'est la version 4 de bootstrap, c'est la dernière il me semble.
Commenter la réponse de depaninf
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 9 juin 2018 à 12:59
0
Merci
En plus j'ai un autre problème, sur les Iphones le site ne s'affiche pas entièrement...juste le header Grrrr

Tu as une solution Hydr0s ?
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention > Hydr0s 1644 Messages postés lundi 24 janvier 2011Date d'inscription 30 août 2018 Dernière intervention - 9 juin 2018 à 17:28
Je viens de comprendre que le site fonctionne sur Iphone 7 (Safari) mais pas sur Iphone 6....
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention > Hydr0s 1644 Messages postés lundi 24 janvier 2011Date d'inscription 30 août 2018 Dernière intervention - 9 juin 2018 à 17:28
Regarde sur PageSpeed Insights l'affichage n'est pas bon non plus....
https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=http%3A%2F%2Fwww.eai-consult.com%2F
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 9 juin 2018 à 13:29
Ah bon tout s'affiche ?? Étrange ça ! Sur Safari sur PC ça ne s'affiche pas correctement, tout est décalé... et sur l'Iphone d'un copain je n'ai que le Header.

Pour le menu déroulant je n'ai pas compris ta dernière suggestion. Tu veux dire mettre tous les liens sur la page ? Ça décale tout sur les PC après
depaninf 82 Messages postés mercredi 31 octobre 2007Date d'inscription 10 juin 2018 Dernière intervention - 9 juin 2018 à 13:30
Regarde sur PageSpeed Insights l'affichage n'est pas bon non plus....
https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=http%3A%2F%2Fwww.eai-consult.com%2F
Hydr0s 1644 Messages postés lundi 24 janvier 2011Date d'inscription 30 août 2018 Dernière intervention - 11 juin 2018 à 20:24
Peux tu mettre les sources du site sur ci-joint par exemple ? C'est du html brut, pas de cms derrière ?

Pour essayer, enlève le loader, il ne sert que si tu as de l'ajax sur le site ce qui n'est pas le cas...
Commenter la réponse de depaninf