menu css

vector · 4 Juillet 2011

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 · 4 Juillet 2011

oui bien sûr, sans aucun problème

momo-fr · 4 Juillet 2011

Ben un attribut background-color pour les navlist ou subnavlist non ?

A moins que tu veuilles quelque chose de plus complexe selon le type de menu (genre rubriques de différentes couleurs) ?

vector · 4 Juillet 2011

cherryblue a dit:
oui bien sûr, sans aucun problème

merci puis-je me permettre de demander comment ? merci

cherryblue · 4 Juillet 2011

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 · 4 Juillet 2011

cherryblue a dit:
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 · 5 Juillet 2011

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…

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…

vector · 5 Juillet 2011

Je te remercie, je vais regarder ça de plus près…

---------- 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… si tu as une idée ?

vector · 5 Juillet 2011

Voir la pièce jointe 63482

Voici ce que je voudrais avoir*les petits carrés de couleurs vont apparaître au survol de la souris ou rester comme ça et (mieux encore) s'allonger sous toute la surface du lien au survol
voilà c'est peut-être + clair maintenant ! merci à tous !

cherryblue · 5 Juillet 2011

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

vector · 5 Juillet 2011

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

Alors là cherryblue j'en attendais pas tant !!! merci vraiment c'est tout à fait ce que je voulais

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 · 5 Juillet 2011

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

Rechercher

Rechercher

menu css

vector

Membre actif

cherryblue

Membre actif

momo-fr

Ancien Aveyronnais

vector

Membre actif

cherryblue

Membre actif

vector

Membre actif

momo-fr

Ancien Aveyronnais

vector

Membre actif

vector

Membre actif

cherryblue

Membre actif

vector

Membre actif

cherryblue

Membre actif

Sujets similaires