11546 sujets

JavaScript, DOM et API Web HTML5

Comment changer la couleur du menu actif change si survol de menu...

bonjour,

J'essaie de trouver une façon simple de faire en sorte que le background color de mon menu actif perde en quelques sort son status d'actif lorsque l'utilisateur survol n'importe laquelle des autres cellule du menu ul li pour revenir à son état d'actif lorsque l'utilisateur retire son curseur du menu. Est-ce possible en CSS pure ou je dois regarder vers une solution avec, par exemple, JQuery? Quelqu'un aurait déjà un exemple fonctionnel à me montrer? Smiley sweatdrop
Bonsoir, ou bonjour vu l'heure.

Chez un de mes clients, j'affecte un id "actif" au lien actuellement actif. Partant de là, tu peux à présent styler le :hover à ta convenance.

ex :

Le Menu : 
<ul  id="navigation"> 
			<li><a href="index.php" id="actif">Accueil</a></li> 
			<li><a href="prestations.php">Prestations</a></li> 
			<li><a href="contact.php">Me Contacter</a></li> 
		</ul>


Le Css (désolé pour le copy/past un peu brutal mais j'ai sommeil Smiley smile : 
#navigation li a {
    position: relative;
    font-size: 1em;
    float: left;
    display: block;
    padding: 150px 10px 10px 10px;
    margin: 0 5px;
    text-decoration: none;
    color: #fff;
    border: 1px outset #fff;
    background: #cb61c9 url(img/stidwhite.png);	
    -o-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;	
    -moz-transition: all 400ms;
    -o-transition: all 400ms;
    -webkit-transition: all 400ms;
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    -o-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}
#navigation li a:hover{
    top: 50px;
    background-color: #444;
    color:#d798e3;
}
#navigation #actif {
    top: 50px;
    background-color: #444;
    color:#d798e3;
    -moz-box-shadow: 0px 0px 10px #d798e3;
    -webkit-box-shadow: 0px 0px 10px #d798e3;
    -o-box-shadow: 0px 0px 10px #d798e3;
    box-shadow: 0px 0px 10px #d798e3;    
    }
#navigation #actif:hover {
    -moz-box-shadow: 0px 0px 5px #000;
    -webkit-box-shadow: 0px 0px 5px #000;
    -o-box-shadow: 0px 0px 5px #000;
    box-shadow: 0px 0px 5px #000;    
    
}


En résumé, j'ai un comportement normal de mon menu, et j'ajoute l'ID #actif au lien actif.
Avec la pseudo classe :hover sur l'ID.
Sauf erreur de ma part ceci n'est compris qu'à partir d'IE7, IE6 ne comprenant pas :hover sur d'autres éléments que <a>.
Pour le visuel, c'est ici
Modifié par fufu (01 Jun 2011 - 05:12)
Salut, pour mon menu j'ais le même résultat, sauf que j'utilise le php, mon menu est écrit une seule fois (j'utilise "include" pour le mettre dans mes différente pages)

a chacune de mes page j'ais 
<?php
$page = "music";
?>


et dans mon menu =
<?php 
					 if ($page == "music")
					 {
						 echo "class=active";
					 } 
					 ?>

Et a la place de "music" j'ai aussi image, vidéo, acceuil ... voila Smiley cligne
En fait je crois que Naya a déjà implémenté cela mais qu'elle voudrait que le menu actif puisse perdre sa décoration de menu actif ( ressembler aux menus normaux) lors du survol d'une autre option .

Je me suis aussi posée cette question et à part le javascript je ne vois pas comment faire.

Edit:

Eh bien si c'est possible en CSS : suffit d'enlever la décoration de l'option active lors du survol de l'élement parent , pour moi c'est une balise 'ul', par contre ne pas oublier de la remettre lors du survol de l'option active .

extrait html :

<nav class="menu" id="menu_site">    
     <ul>
       <li class="first active"><a href="http://www.arialia.fr/" title="Accueil" >Accueil</a></li>
       <li><a href="blog/" title="Blog" >Blog</a></li>
       <li><a href="logiciels/" title="Logiciel" >Logiciels</a></li>
       <li class="last"><a href="contact/" title="Contact" >Contact</a></li>
     </ul> 
</nav>


extrait css :

nav li a {
	display:inline-block;
	padding:8px 8px 8px 8px;
        border: none;
	
	color:#444;
	text-decoration:none;
	text-transform:uppercase;
	margin:0 1px 0 0;
}

nav li a:hover, nav li a:focus, nav li a:active,nav li.active a, 
    nav ul:hover li.active a:hover {
	background:rgba(255,255,255,0.5);
        border: none;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
}
nav ul:hover li.active a {
	background:transparent;

}


visuel à ne pas regarder sous IE6,7,8 , pas encore fait la dégradation progressive ...
Modifié par Arialia (01 Jun 2011 - 06:55)
La solution proposée par Arialia me semble correcte. Ce principe marchera sur tous les navigateurs sauf IE7 (pas une grande perte pour ce dernier).

Laurie-Anne a écrit :
Pour une solution fiable et intéropérable, il faut utiliser le JavaScript.

Pour l'effet au survol, CSS suffit.
Pour obtenir cet effet lors de la navigation au clavier (focus), il faudra effectivement utiliser JavaScript.
Sujet clos
Aller à