Menu horizontal avec effet de lueur

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

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)