Menu déroulant Bootstrap

**patlej** · 13/03/2019, 16h46

Bonjour,

Help : je ne parviens pas à mettre en oeuvre ce menu déroulant avec Bootstrap :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<div class="container nav">
			<div class="navbar effect shift navbar-expand-lg " style="margin: 0 auto;">
				<a class="nav-item nav-link" href="#" ><i class="fa fa-fw fa-home fa-lg" style="color: blue"></i> <span class="font-navbar">Home</span></a> 
				<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#" ><i class="fa fa-fw fa-calculator fa-lg" style="color: blue"></i><span class="font-navbar">Devis</span></a> 
				<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
				  <a class="dropdown-item" href="#">Créer un nouveau devis</a>
				  <a class="dropdown-item" href="#">Mes devis</a>
				</div>
				<a class="nav-link dropdown-toggle" href="#" ><i class="fa fa-fw fa-cogs fa-lg" style="color: blue"></i> <span class="font-navbar">Administrer</span></a>
<!--
				<a href="#" ><i class="fa fa-fw fa-dolly-flatbed fa-lg" style="color: blue"></i> <span class="font-navbar">Mes commandes</span></a> 
				<a href="#" ><i class="fas fa-fw fa-address-card fa-lg" style="color: blue"></i> <span class="font-navbar">Mes clients</span></a>
-->
			</div>
		</div>

Et dans le head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    <head>
        <title>Aqua-Cover Calculateur</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, , shrink-to-fit=no">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
	   	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

**patlej** · 13/03/2019, 17h01

Je pense que le problème vient en grande partie du CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.navbar {
	border-color: grey;
	border-width: 1px;
	border-style: solid;
	transition: all 0.3s;
	height: auto;
	width: 80%;
	background-image: linear-gradient(to left, white 20%, #e8e8e8 40%, #e8e8e8 50%, white 80%);
}
 
.effect
{
  position: relative;
}
 
.effect:before, .effect:after{
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	margin-left: 0px;
	margin-right: 0px; 
	width: 30%;
	top: 15%;
	max-width:300px;
	background: #777;
  	-webkit-box-shadow: 0 15px 10px #777;
  	-moz-box-shadow: 0 15px 10px #777;
  	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
 
.effect:after {  
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;  
	}  
/*Fin de l'ombrage sous le menu principal */

Menu déroulant Bootstrap

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager