menu css

vector

Membre confirmé
16 Novembre 2004
157
1
48
virginie.penalba.free.fr
Bonjour à tous !
Je suis en train de mettre en place un menu css avec un code récupéré sur le net…
J'aimerais savoir si il est possible de mettre des fonds de couleur differents sous chaque liste voir sous chaque sous liste ?

Merci d'avance :zen:

Bloc de code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
	<style type="text/css">
		#navlist
		{
	padding: 3px;
	color:#60C
	width: 1em;
	font: 10px verdana,sans-serif;
		}
		
		#navlist li
		{
	list-style: none;
	
		}
		
		#navlist a
		{
	
	text-decoration: none;
	display: block;
	border-left: 1em solid ;
	border-bottom: 0px solid ;
	padding: 2px 5px;
		}
		
		#navlist a:hover {
	border-color: #390;
}
		
		#subnavlist li a
		{
	color: #900;
	border: 0;
	border-left: 1em solid;
	padding: 3px 3px;
	margin-left: -30px;
		}
    </style>
</head>
<body>
<div id="header">
	<h1>
		
<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">SOCIÉTÉ</a>
		<ul id="subnavlist">
			<li id="subactive"><a href="#" id="subcurrent">RUNGIS</a></li>
			<li><a href="#">PLAN ORGON</a></li>
			<li><a href="#">SUISSE</a></li>
		
		</ul></li>
		<li><a href="#">PRODUITS</a></li>
        <ul id="subnavlist">
			<li id="subactive"><a href="#" id="subcurrent">KIWI</a></li>
			<li><a href="#">AVOCAT</a></li>
			<li><a href="#">LIME</a></li>
            <li><a href="#">ORANGE</a></li>
			<li><a href="#">POMELO</a></li>
            <li><a href="#">RAISIN</a></li>
			<li><a href="#">CLÉMENTINE</a></li>
            <li><a href="#">LITCHI</a></li>
			<li><a href="#">MANGUE</a></li>
            <li><a href="#">GINGEMBRE</a></li>
			<li><a href="#">GRENADE</a></li>
            <li><a href="#">PATATE DOUCE</a></li>
			<li><a href="#">ABRICOT</a></li>
            <li><a href="#">CERISE</a></li>
		
		</ul>
		<li><a href="#">CONTACT</a></li>
	</ul>
</div>
<p>
	
</body>
</html>
 

cherryblue

Membre émérite
5 Avril 2010
526
13
tu as la réponse un post au-dessus. Si tu veux des background différents pour chaque sous-menu, tu peux ajouter de nouvelles classes à ton CSS avec les background, et tu attribues ces classes aux différentes listes (ul pour la liste entière, li si tu veux des couleurs différentes sur les li d'une même liste)
 

vector

Membre confirmé
16 Novembre 2004
157
1
48
virginie.penalba.free.fr
tu as la réponse un post au-dessus. Si tu veux des background différents pour chaque sous-menu, tu peux ajouter de nouvelles classes à ton CSS avec les background, et tu attribues ces classes aux différentes listes (ul pour la liste entière, li si tu veux des couleurs différentes sur les li d'une même liste)

je vais regarder merci à tous !!
 

momo-fr

Ancien Aveyronnais
Club MacG
4 Octobre 2004
4 725
1 853
Bordeaux (33)
www.momofr.net
Voilà ton code revu :
Bloc de code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!-- Styles du conteneur de la liste menu -->
#navlist {
	color:#60C;
	font: 10px verdana, sans-serif;
	margin: 0px;
	padding: 0px;
}
#navlist li {
	list-style: none;
}
<!-- Styles menu premier niveau -->
#navlist a:link, #navlist a:visited {
	text-decoration: none;
	display: block;
	border-left: 1em solid;
	border-bottom: 0px solid;
	padding: 2px 5px;
	background-color: #FF3;
}
#navlist a:hover, #navlist a:active {
	border-color: #390;
}
<!-- Styles menu second niveau -->
#subnavlist li a:link, #subnavlist li a:visited {
	color: #900;
	border: 0;
	border-left: 1em solid;
	padding: 3px 3px;
	margin-left: -30px;
	background-color: #FCC;
}
#subnavlist li a:hover, #subnavlist li a:active {
	background-color: #C36;
	color: #FFF;
}
<!-- Styles etat actif des menus -->
#navlist #current {
	color: #FFF;
	background-color: #339;
}
#subnavlist #subcurrent {
	color: #FFF;
	background-color: #C36;
}
</style>
</head>
<body>
<div id="header">
<h1>
<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a href="#" id="current">SOCIÉTÉ</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">RUNGIS</a></li>
        <li><a href="#">PLAN ORGON</a></li>
        <li><a href="#">SUISSE</a></li>
      </ul>
    </li>
    <li><a href="#">PRODUITS</a></li>
    <ul id="subnavlist">
      <li id="subactive"><a href="#" id="subcurrent">KIWI</a></li>
      <li><a href="#">AVOCAT</a></li>
      <li><a href="#">LIME</a></li>
      <li><a href="#">ORANGE</a></li>
      <li><a href="#">POMELO</a></li>
      <li><a href="#">RAISIN</a></li>
      <li><a href="#">CLÉMENTINE</a></li>
      <li><a href="#">LITCHI</a></li>
      <li><a href="#">MANGUE</a></li>
      <li><a href="#">GINGEMBRE</a></li>
      <li><a href="#">GRENADE</a></li>
      <li><a href="#">PATATE DOUCE</a></li>
      <li><a href="#">ABRICOT</a></li>
      <li><a href="#">CERISE</a></li>
    </ul>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>
<p>
</body>
</html>

Ceci dit les styles sont un peu alambiqués mais doivent sans doute correspondre à un script Javascript pour le déploiement. Les couleurs sont à modifier&#8230;

Dans l'absolu on les définis simplement en ul li (premier niveau) et ul ul li (second niveau) soit une imbrication de 2 listes à puces.

Tu as des états de menu actifs (à 2 niveaux en plus - je ne vois pas pourquoi), j'ai commenté rapidement les CSS pour que tu te repères.

Au taf&#8230; :p :cool:
 

vector

Membre confirmé
16 Novembre 2004
157
1
48
virginie.penalba.free.fr
Je te remercie, je vais regarder ça de plus près&#8230;

---------- Nouveau message ajouté à 13h41 ---------- Le message précédent a été envoyé à 13h32 ----------

merci pour ton aide momo, la question par rapport à ce menu ce serait de mettre une couleur pour : LITCHI, MANGUE, GINGEMBRE, GRENADE, PATATE DOUCE en vert par exemple, car ils sont de la même famille et ABRICOT, CERISE en rouge&#8230; si tu as une idée ?
 

cherryblue

Membre émérite
5 Avril 2010
526
13
avec un schéma ça va mieux.
regarde : http://www.lacerisebleue.com/menu.html

ça correspond visuellement à ce que tu veux. C'est un ensemble de DIV qui définissent tes blocs de couleurs.
Il te reste plus qu'à l'adapter, régler les marges, padding, jouer sur la taille des carrés et le rendre compatible pour Internet explorer bien sûr :)
 
Dernière édition:

vector

Membre confirmé
16 Novembre 2004
157
1
48
virginie.penalba.free.fr
avec un schéma ça va mieux.
regarde : http://www.lacerisebleue.com/menu.html

ça correspond visuellement à ce que tu veux. C'est un ensemble de DIV qui définissent tes blocs de couleurs.
Il te reste plus qu'à l'adapter, régler les marges, padding, jouer sur la taille des carrés et le rendre comptable pour Internet explorer bien sûr :)

Alors là cherryblue j'en attendais pas tant !!! merci vraiment c'est tout à fait ce que je voulais :eek::zen::up: merci merci ! J'étais en train de galèrer comme il faut, tu me sauves !
Donc ce n'est pas compatible avec Internet explorer quoi mac ou pc ?
Sinon je testerai…
mercci
 

cherryblue

Membre émérite
5 Avril 2010
526
13
je viens de le tester sur Internet Explorer 9 et ça marche. J'ai pas les autres IE sous la main pour te dire, il y a peut-être des réglages à faire au niveau des marges, ou des alignements. Il y a toujours des trucs bizzaroïdes sur les margin et padding avec IE donc il vaut mieux vérifier.
Sinon, j'ai testé sous Chrome, Firefox et Safari, et le rendu est identique

Maintenant à toi de jouer pour le fignoler et l'adapter à ta sauce, tu as déjà une bonne base