1. Accueil
  2. Graph
  3. Sources Graph
  4. Sources WebDesign
  5. Menu horizontal avec effet de lueur

Menu horizontal avec effet de lueur

Soyez le premier à donner votre avis sur cette source.

Vue 6 650 fois - Téléchargée 607 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
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
Signaler
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
Signaler
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!
Signaler
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
Signaler
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
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)