28172 sujets

CSS et mise en forme, CSS3

Bootstrap (menu déroulant avec dropdown et data-toggle)non fonctionne

Bonjour,

Je suis en train de créer mon site style cv vitrine en ligne et j'ai incorporé du bootstrap et je mettrai par la suite du jquery.

Je galère sur un problème depuis quelque temps, je souhaite insérer un menu déroulant avec dropdown mais le data-toggle ne marche pas.

J'ai d'abord pensé à l'odre des scripts bootstrap jquery mais apparemment ce n'est pas, ça auriez vous une idée? je vous partage mon code source.

Merci d'avance

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Profil de Laurent Coupeau</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>


<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-inverse center">
<div class="container-fluid">

<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Accueil</a></li>
<li><a href="Expériences.html"><span class="glyphicon glyphicon-folder-open"></span> Expériences professionnelles</a></li>
<li class="dropdown-toggle">

<a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-briefcase"></span> Compétences professionnelles<span class="caret"></span></a></li>
<ul class="dropdown-menu">
<li><a href="développement.html">Développement</a></li>	
<li><a href="Adminreseausystème.html">Administration système réseau</a></li>
<li><a href="Autres.html">Autres</a></li>	
</ul>
</li>
<li ><a class="dropdown"> <href="Formations.html"><span class="glyphicon glyphicon-education"></span> Formations</a></li>
<li><a href="Projets.html"><span class="glyphicon glyphicon-book"></span> Projets</a></li>
<li><a href="Loisirs.html"><span class="glyphicon glyphicon-film"></span> Loisirs</a></li>
<li><a href="contact.html"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a></li>	
<li><a href="https://www.linkedin.com/in/laurentcoupeau" width="30px" height="30px"/><img src="7.png" width="30px" height="30px" class="img-circle"></a></img></li>
<li><a href="https://www.youtube.com/?gl=FR&hl=fr" width="30px" height="30px"/><img src="2.png" width="30px" height= "30px" class="img-circle"></a></img></li>
</ul>
<form class="navbar-form navbar-right">
<div class="input-group">
<input class="form-control" type="search" class="input-sm form-control" placeholder="recherche">
<div class="input-group-btn">
<button type="submit" class=" btn btn-primary">
<i class="glyphicon glyphicon-search"></i></button>
</div>
</div>	
</form>

</nav>

Modifié par Anticonstitu66 (29 Apr 2017 - 15:54)
Tu as juste un </li> en trop à la fin de cette ligne :

<a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-briefcase"></span> Compétences professionnelles<span class="caret"></span></a></li>

bonne soirée
Bonjour les amis,
J'ai un problème similaire voici mon HTML:
<div>
<ul class="menu">
<li>About us</li>
<li>Career</li>
<li class="dropdown">Departments
<div class="drowdown-content">
<a href="https://www.docplanner.com/department?dep=marketing">Marketing & FR</a>
<a href="https://www.docplanner.com/department?dep=customer">Customer Success & Sales</a>
<a href="https://www.docplanner.com/department?dep=it">IT, Product, Design & UX</a>
<a href="https://www.docplanner.com/department?dep=finance">Finance & Administration</a>
<a href="https://www.docplanner.com/department?dep=hr">HR & more</a>
</div>
</li>
</ul>
</div>

Et voici mon CSS:
.menu{
display: flex;
list-style: none;
}
.dropdown{
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
et pourtant la fonction dropdown ne fonctionne pas
Modifié par hamus (13 Aug 2019 - 12:59)
Sujet clos
Aller à