Menu horizontal avec effet de lueur

Soyez le premier à donner votre avis sur cette source.

Vue 6 374 fois - Téléchargée 559 fois

Télécharger le projet
Commenter

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 !
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
Reldan
Messages postés
14
Date d'inscription
mercredi 27 octobre 2010
Statut
Membre
Dernière intervention
27 mai 2013
 -
C'est sympa mais je ne vois pas de php... tu n'aurais pas dut déposer cette source dans la section graphisme ?
je ne suis pas un habitué du site donc excuse moi si je me trompe.
Signaler
youkc
Messages postés
46
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
15 août 2012
 -
Tu as peut être raison!. j'ai hésité quand je mettais ça ici. je vais voir comment déplacer ça. Merci !
Signaler
laurentfrancis
Messages postés
8
Date d'inscription
vendredi 30 septembre 2005
Statut
Membre
Dernière intervention
23 avril 2012
 -
Bonjour,
Votre code fonctionne sous firefox, mais ne fonctionne pas sur
internet explorer 6
Désolé ...
Signaler
cs_jojo19
Messages postés
8
Date d'inscription
vendredi 17 septembre 2004
Statut
Membre
Dernière intervention
27 décembre 2012
 -
Ni avec IE8...
il est préférable d'indiquer quels sont les navigateurs valides pour le code.
Amicalement.
Signaler
cs_jojo19
Messages postés
8
Date d'inscription
vendredi 17 septembre 2004
Statut
Membre
Dernière intervention
27 décembre 2012
 -
J'ai oublié de dire que l'animation (avec les bons navigateurs) est bien sympa.
Afficher les 11 commentaires
S'inscrire maintenant

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.

Du même auteur (youkc)