Discussion :

[Funstenolf]

Bonjour,

Je suis actuellement en stage pour une mairie, et je voulais vous demander s'il était possible, sur du CSS 2, de modifier la couleur du background de chaque partie (j'utilise le menu classique avec la liste ul)
Celui-ci est animé et déroulant
Voici des extraits de mon code :

Code css :

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
ul.dropdown {font-weight: bold;}
ul.dropdown li {padding: 7px 10px;
	border-style: solid;
	border-width: 1px 1px 1px 0;
	border-color: #fff #d9d9d9 #d9d9d9;
	background-color: #f6f6f6;
	color: #000;}
ul.dropdown li.hover,ul.dropdown li:hover { color: #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 0%, 42%) inset, 
                0 -2px 0 hsl(210, 0%, 48%) inset, 
                0 -3px 0 hsl(210, 0%, 54%) inset, 
                0 -4px 0 hsl(210, 0%, 60%) inset, 
                0 -5px 0 hsl(210, 0%, 70%) inset; 
	padding: 8px 25px 17px 25px;
	transition: all .3s 0s;}
ul.dropdown a:link,
ul.dropdown a:visited	{ color: #000;
 text-decoration: none;}
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
 
ul.dropdown ul {width: 150px;
	margin-top: 1px;}
ul.dropdown ul li { font-weight: normal;}
ul.dropdown *.dir {padding-right: 20px;
	background-image: url(../images/nav-arrow-down.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;}
ul.dropdown-horizontal ul *.dir {padding-right: 15px;
	background-image: url(../images/nav-arrow-right.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;}
ul.dropdown-upward *.dir {background-image: url(../images/nav-arrow-top.png);}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {background-image: url(../images/nav-arrow-right.png);}
ul.dropdown-vertical-rtl *.dir {padding-right: 10px;
	padding-left: 15px;
	background-image: url(../images/nav-arrow-left.png);
	background-position: 0 50%;}

Et ici, le menu html :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
<ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="#">Accueil
	<li class="dir">La commune
		<ul>
			<li><a href="#">Ville</a></li>
			<li class="dir">Conseil Municipal
				<ul>
					<li><a href="#">Membres</a></li>
					<li><a href="#">Commission</a></li>
					<li><a href="#">Délibération</a></li>
				</ul>
			</li>
			<li><a href="#">Chiffres</a></li>
			<li><a href="#">Jumelage</a></li>
		</ul>
	</li>
	<li class="dir">Cadre de vie
		<ul>
			<li><a href="#">Voirie</a></li>
			<li><a href="#">Installations</a></li>
			<li><a href="#">Urbanisme</a></li>
			<li><a href="#">La forêt communale</a></li>
			<li>Environnement
				<ul>
					<li><a href="#">Membres</a></li>
					<li><a href="#">Commission</a></li>
					<li><a href="#">Délibération</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Infos</li>
	<li><a href="#">Associations</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Merci de vos réponses

[Funstenolf]

En fait j'ai réussi à trouver, j'ai utilisé des id, heureusement que je n'ai que 7 onglets, du coup, pour chaque onglet, j'ai juste changé la variable de la teinte en HSL, dans par rapport à l'ombre de chaque onglet