Menu déroulant HTML CSS

Résolu/Fermé
Signaler
Messages postés
34
Date d'inscription
samedi 17 janvier 2009
Statut
Membre
Dernière intervention
21 octobre 2012
-
Messages postés
34
Date d'inscription
samedi 17 janvier 2009
Statut
Membre
Dernière intervention
21 octobre 2012
-
Bonjour je reviens avec mon menu pour demander un peu d'aide.

Je souhaiterai utiliser le "current " avec différentes couleurs sur le menu déroulant

- en 1 il faut que le visiteur sache que sa page est bien voyage donc sera de couleur vert
- en 2 les sous menu doivent rester de la couleur de fond général (donc bleu) sauf au passage souris ou il deviennent orange démontrant ainsi que le visiteur n'est pas sur une page sous menu mais bien juste dans le menu "voyage"
- en 3 si le visiteur clique sur le sous menu "TIC" alors la page s'affichant montrera le menu voyage vert, les autres sous menu restent inerte et sans couleurs (donc bleu) et le menu TIC sera par exemple rouge

J'ai essayé d'isolé la partie menu déroulant en lui mettant une "class b" et une "class c". Mais ça veut pas fonctionner.

Merci par avance pour votre aide


CODE HTML


<div id="menu_cadre">
<div id="menu">
<ul>
  	<li><a href="index.html">Accueil</a></li>
  	<li><a href="qui.html">Qui sommes nous ?</a></li>
	<li  class="b current"><a>voyage</a>   	
  		<ul>
            <li class="c current"><a href="cb.html">tic</a></li>
      		<li class="c"><a href="cb.html">tac</a></li>
      		<li class="c"><a href="cc.html">toc</a></li>
            <li class="c"><a href="cd.html">zer</a></li>
    	</ul>
	</li>
	<li><a href="indesud.html">le jus d'orange</a></li> 
	<li><a href="photos.html">Photos</a></li> 
	<li><a href="contacts.html">Contacts</a></li> 
</ul>
</div>
</div>


CODE CSS

/*MENU DU SITE*/

#menu_cadre {
	background-color:#000033;
	width: 1000px;
	height: 32px;
	margin-bottom: 10px;
}
#menu{
	background-color:#000033;
	clip: rect(auto,auto,auto,auto);
	padding-left: 50px;
  }
#menu ul {
	margin:0;
	list-style-type:none;
	text-align:center;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
 }
#menu li {
	float:left;
	width: 150px;
 }
#menu li a {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display:block;
	color:#fff;
	font-size:0.7em;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 6px;
	padding-left: 10px;
	margin-top: 3px;
 }
 
#menu li.current a { 
 background-color:#77b800;
  } 
#menu li a:hover {
 background-color:#FF9900;
 }
#menu  li.b {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display:block;
	color:#fff;
	font-size:1em;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
 }

#menu li.current b { 
 background-color:#77b800;
  } 
  
 #menu li.c {
	display:block;
	color:#fff;
	font-size:1em;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
 }

#menu li.current c { 
 background-color:#f83711;
  } 

#menu ul li ul {
 z-index: 2;
 display:none;
 background-color:#000033;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
#menu li ul {
 position:absolute;
 }



4 réponses

Messages postés
34
Date d'inscription
samedi 17 janvier 2009
Statut
Membre
Dernière intervention
21 octobre 2012
2
Super génial, merci beaucoup pour ce logiciel.
Je vais explorer maintenant.
encore merci
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
140
Date d'inscription
samedi 19 mai 2012
Statut
Membre
Dernière intervention
12 juin 2017
17
essaye avec le logiciel css3 menu :

http://css3menu.com/

c'est hyper pratique, il te permet d'insérer le menu dans ta page très facilement (il faut jusque que ta page ne sois pas vide)

comme c'est une version gratuite tu n'as pas tout complétement, mais il y a quand même des beaux menus.

PS: un conseil dans option, mets en français, moi comme un idiot j'ai tout traduit de l'anglais xD
Messages postés
140
Date d'inscription
samedi 19 mai 2012
Statut
Membre
Dernière intervention
12 juin 2017
17
Juste un petit conseil : dans option clic sur : insérer les images au css. Sinon tu devras retrouver les images sur ton ordinateur et les uploader sur ton hébergeur. Tandis que là tu n'auras pas besoin.
Messages postés
34
Date d'inscription
samedi 17 janvier 2009
Statut
Membre
Dernière intervention
21 octobre 2012
2
Salut, merci pour ce conseil...