Dropdown menu et flèches de direction

**lesitadom39** · 27/08/2018, 16h04

Bonjour,
Mon site sous boostrap 4 comporte des menus et sous-menus

Nom : dropdown.png
Affichages : 912
Taille : 11,7 Ko

avec le code suivant:

Code HTML :

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
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="http://google.com">Insectes</a>
            <ul class="dropdown-menu z-depth-2 ">
              <li><a class="dropdown-item dropdown-cote" href="#">papillons</a></li>
              <li><a class="dropdown-item dropdown-cote" href="#">Abeilles</a></li>
              <li class="dropdown-submenu">
				<a class="dropdown-item dropdown-toggle" href="#">Autres insectes</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item dropdown-cote" href="#">Libellules</a></li>
                  <li><a class="dropdown-item dropdown-cote" href="#">Autres</a></li>
                </ul>
              </li>
            </ul>
          </li>
		  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="http://google.com">Parcs Animaliers</a>
            <ul class="dropdown-menu">
				<li><a class="dropdown-item dropdown-cote"   href="jurafaune.php">Jurafaune</a></li>
				<li><a class="dropdown-item dropdown-cote"   href="citadelle.php">Citadelle</a></li>
				<li><a class="dropdown-item dropdown-cote"   href="dombes.php"><i class="fas fa-dove"></i> Parc des Oiseaux de Villars les Dombes</a></li>
				<div class="divider"></div>
				<li><a class="dropdown-item dropdown-cote"   href="#">Autres</a></li>
            </ul>
          </li>

Je voudrais aligner les flèches à droite et les faire pivoter au passage de la souris.
C'est apparemment "dropdown-toggle" qui s'en charge, mais je n'arrive pas à comprendre comment le customiser.
Merci d'avance

**Manequin** · 27/08/2018, 19h57

Bonsoir, où est ton code CSS ? Ou bien tu veux qu'on fasse tout à ta place ?

Cordialement.

**lesitadom39** · 27/08/2018, 20h06

Envoyé par Manequin

Bonsoir, où est ton code CSS ? Ou bien tu veux qu'on fasse tout à ta place ?

Cordialement.

c'est mieux comme ça ?

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
/*bandeau principal */
.navbar-expand-lg 
{
	background: radial-gradient(ellipse at center top,  rgba( 200, 200, 200, 0.9) 10% ,  rgba( 0, 0, 0, 0.6) 75%);
	border-bottom: 3px inset #808080;
	font-size:1.1rem;
}
/*signets */
.navbar-expand-lg .navbar-nav > li > a 
{
	color: rgba(6, 71, 137, 1);
	background-image: radial-gradient(circle farthest-corner at left top,  rgba(210, 210, 210, 0.8) 0%, rgba(115, 111, 114, 1) 100%);
	border:2px double rgba( 44, 44, 44, 0.6);
}
/*signets survolés */
.navbar-expand-lg .navbar-nav > li > a:hover,
.navbar-expand-lg .navbar-nav > li > a:focus 
{
	color:  rgba(245, 237, 240, 1);
	background: radial-gradient(ellipse at center top,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
}
/*fond des signets */
.navbar-expand-lg .navbar-nav > li > .dropdown-menu
{
	background-color: rgba(46, 64, 87, 0.7);
	border-radius:15px;
	border-style : outset ;
}
/*signets secondaires */
.navbar-expand-lg .navbar-nav > li > .dropdown-menu > li > a 
{
	background: radial-gradient(ellipse at center top,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	color:  rgba(245, 237, 240, 1);
	border:2px ridge #686868;
	font-size:1.1rem;
}
/*signets secondaires survolés */
.navbar-expand-lg .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-expand-lg .navbar-nav > li > .dropdown-menu > li > a:focus 
{
	background-color: rgba(46, 64, 87, 0.7);
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
}
/*signet actif */
.navbar-expand-lg .navbar-nav > .active > a,
.navbar-expand-lg .navbar-nav > .active > a:hover,
.navbar-expand-lg .navbar-nav > .active > a:focus 
{
	color: rgba(46, 64, 87, 1);
	background: linear-gradient(to right,#ffffff, #686868);
}
 
.dropdown-item
{
	height:auto;
	 border:2px ridge #5e696b;
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	font-size:1.1rem;
}
.dropdown-cote 
{
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	  border:2px ridge #5e696b;
	font-size:1.1rem;
}
.dropdown-cote a:hover
{ 
	background: radial-gradient(ellipse at center top,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	border:2px ridge #5e696b;
}
.dropdown-submenu 
{
	position: relative;  
}
.dropdown-submenu a::after 
{
	transform: rotate(-90deg);
	position: absolute;
	right: 6px;
	top: .8em;
	font-size:1.1rem;
}
.dropdown-submenu-right a::after 
{
	transform: rotate(90deg);
	position: absolute;
	left: 6px;
	top: .8em;
	font-size:1.1rem;
}
 
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
	font-size:1.1rem;
} 
.dropdown-submenu .dropdown-menu .dropdown-submenu-right
{
	top: 0;
	left: 100%;
	margin-left: .1rem;
	margin-right: .1rem;
	background-color: rgba(46, 64, 87, 0.7);
	border-radius:15px;
	border-style : outset ;
	border:4px double #2c2c2c;
}
/* rotate caret on hover */
 
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
	background-color: rgba(46, 64, 87, 0.7);
	border-radius:15px;
	border-style : outset ;
}
.dropdown-submenu .dropdown-menu>li>a:hover
{
 background-image: linear-gradient(#5b5b5b, #bab7b7);
}
.dropdown-submenu-right{position:relative;}
.dropdown-submenu-right>.dropdown-menu
{
	top:0;
	left:-100%;
	margin-top:-6px;
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	border-radius:15px;
	border-style : outset ;
	text-align: right;
	}
.dropdown-submenu-right:hover>.dropdown-menu{display:block;}
 
.dropdown-submenu-right:hover>a:after
{
	border-left-color:#ffffff;
	background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
	}
.dropdown-submenu-right.pull-left{float:none;}
.dropdown-submenu-right.pull-left>.dropdown-menu
{
		left:-100%;
		background: radial-gradient(ellipse at center bottom,  rgba(178, 178, 178, 1) 0%, rgba(115, 111, 114, 1));
}
.navbar .nav li.dropdown.open>.dropdown-toggle .caret {
    border-top-color: transparent;
    border-bottom: 4px solid #000000;
    position: relative;
    top: -3px;
}

**Manequin** · 27/08/2018, 22h10

Ma boule de crystal plante. Moi même j'utilise bootstrap 4.
Pas de solution pour le moment.
Mais je ne sais pas si c'est possible de faire pivoter cette petite flèche au survol de la souris.

Cordialement.

Invité · 27/08/2018, 23h24

Bonjour,

Code css :

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

1
2
3
.dropdown-submenu li:hover > a:after {
    transform: rotate(0deg);
}

**Manequin** · 28/08/2018, 01h03

@jreaux je l'ai fait mais sans succès.

Cordialement.

Dropdown menu et flèches de direction

CSS

Discussions similaires

Partager

Partager