Menu horizontal avec effet de lueur

Soyez le premier à donner votre avis sur cette source.

Vue 6 522 fois - Téléchargée 588 fois

Description

un menu horizontal avec effet de lueur au passage de la souris.

Source / Exemple :


<html>
<head>
	<STYLE type="text/css">

	<!--

	nav {
		width:650px;
		height:42px;
		margin: auto;
		background:rgba(102,102,102,0.8);
	}

	nav ul{
		list-style-type:none; padding-left:30px; text-align:center;
	}

	nav ul li a {
			display:block; 
			float:left; 
			text-decoration:none;
			width:100px; 
			padding:5px; 
			font-size:16px;
			font-weight:bold;
			background:rgba(0,0,0,0.5);
			transition: background 0.8s linear;
		   -moz-transition: background 0.8s linear;
		   -webkit-transition: background 0.8s linear;
			margin:5px 5px 0 0; 
			line-height:20px;
			color:white;
			-moz-box-shadow: 0 0 8px #000000 inset, 0 0 16px #000000 inset, 0 0 4px #000000;  
			-webkit-box-shadow: 0 0 8px #000000 inset, 0 0 16px #000000 inset, 0 0 4px #000000;  
			box-shadow: 0 0 8px #000000 inset, 0 0 16px #000000 inset, 0 0 4px #000000;	
			-moz-border-radius: 5px ;
			-webkit-border-radius: 5px ;
			border-radius: 5px;
			border:1px solid #197462;  
			}
			
	nav ul li a:hover {
		background:#02FFCD;
		color:#242424;
	}

	nav ul li a.active {
		background:#02FFCD;
		color:#242424;
	}			

	-->
	</STYLE>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">page 1</a></li>
			<li><a class="active" href="#">page 2</a></li>
			<li><a href="#">page 3</a></li>
			<li><a href="#">page 4</a></li>
			<li><a href="#">page 5</a></li>
		</ul>
	</nav>
</body>
</html>

Conclusion :


Merci et à la prochaine !

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
30 avril 2012

Joli script sous FF, Safari et Chrome mais totalement non fonctionnel sur IE9 et très bizarre sous IE 10, ça aurait été un plus d'ajouter un code paliatif pour que le script soit pleinement opérationnel
Messages postés
4
Date d'inscription
lundi 15 décembre 2008
Statut
Membre
Dernière intervention
24 avril 2012

j'ai dû mal reprendre le code !
j'ai utilisé : IE9, Firefox, et Chrome, le 1ier rien, les 2 autres du rouge !
Merci d'avoir répondu à mon courriel
LGR
Messages postés
46
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
15 août 2012

NURUGEL le menu est bien horizontal, peut être pas d'effet selon le navigateur que tu utilise!
Messages postés
4
Date d'inscription
lundi 15 décembre 2008
Statut
Membre
Dernière intervention
24 avril 2012

Plusieurs points étranges :
1) le menu n'est pas horizontal mais vertical,
2) pas d'effets particuliers !
dommage
LGR
Messages postés
1
Date d'inscription
samedi 27 août 2011
Statut
Membre
Dernière intervention
24 avril 2012

Pas mal la barre sous Google Chrome 18 et sous FireFox 11. A part IE8, qui ne veut rien savoir, mais bon on a l'habitude. Qui surfe encore avec IE aujourd'hui? :p
Afficher les 11 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.