Navbar: menu déroulant

depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   -  
Hydr0s Messages postés 1678 Date d'inscription   Statut Membre Dernière intervention   -
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 :)



4 réponses

Hydr0s Messages postés 1678 Date d'inscription   Statut Membre Dernière intervention   681
 
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...
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
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...
0
Hydr0s Messages postés 1678 Date d'inscription   Statut Membre Dernière intervention   681
 
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
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
J'ai testé mais ça modifie les boutons du menu...
0
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
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 ....
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
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 ?
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
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


0
Hydr0s Messages postés 1678 Date d'inscription   Statut Membre Dernière intervention   681
 
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>
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
Mais non c'est la version 4 de bootstrap, c'est la dernière il me semble.
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
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 ?

0
Hydr0s Messages postés 1678 Date d'inscription   Statut Membre Dernière intervention   681
 
Sur mon iphone 7/Safari, le site s'affiche correctement !?

Autre suggestion pour le menu déroulant, le supprimer et faire en sorte de tout rentrer sur une page avec des liens à partir de la première page.
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
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
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13
 
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
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13 > Hydr0s Messages postés 1678 Date d'inscription   Statut Membre Dernière intervention  
 
Je viens de comprendre que le site fonctionne sur Iphone 7 (Safari) mais pas sur Iphone 6....
0
depaninf Messages postés 124 Date d'inscription   Statut Membre Dernière intervention   13 > Hydr0s Messages postés 1678 Date d'inscription   Statut Membre Dernière intervention  
 
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
0