menu css

vector

vector

Membre actif
16 Novembre 2004
157
1
51
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>
 
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)
 
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:
 
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 ?
 
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:
cherryblue a dit:
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 :)
Cliquez pour agrandir...

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
 
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
 

Sujets similaires

Morebany
[HTML5]jouer/stopper/rejouer... sa webcam
Réponses
1
Affichages
1K
Développement web
Morebany
Morebany
balance
code CSS
Réponses
1
Affichages
3K
Développement web
momo-fr
momo-fr
phcm64100
Signature HTML pour mail
Réponses
2
Affichages
1K
Web et e-mail
phcm64100
phcm64100
benG
Mail : signature HTML
Réponses
1
Affichages
1K
Web et e-mail
julienboost
J
Pochtroi
Développement site en local
Réponses
10
Affichages
3K
Développement web
Pochtroi
Pochtroi
Haut Bas
Back