Menus CSS :: Weuhzor

Menus CSS

Cette page regroupe des tests de menu en css. J'ai voulu essayer différents type d'affichage et les garder à porter de mains. J'en profite pour les mettres à disposition de tout le monde. Cliquez sur "Afficher le code css" pour obtenir le code correspondant au menu. J'espère que ça vous sera utile ou que ça vous donnera des idées !

Le code html est identique pour tous les menus:

<div class="menu"> <!-- menu: style appliqué (menu1, menu2...)-->
	<ul>
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Menus css</a></li>
		<li><a href="#">Forum</a></li>
	</ul>
</div>

Bordures

div.menu1 {
	width:150px;
	background:#113;
	border:2px solid #115;
}

div.menu1 ul
{
	width:150px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

div.menu1 li
{
	text-align: center ;
	margin:0;
}

div.menu1 li a
{
	width: 146px;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	display: block ;
	color:#CCF;
	text-decoration: none;
	border-left:2px solid white;
	border-right:2px solid white;
}

div.menu1 li a:first-letter {
	color:#fff;
}

div.menu1 li a:hover
{
	color:white;
	width: 150px;
	line-height: 21px ;
	background:#226;
	border:0px;
	border-top:2px solid white;
	border-bottom:2px solid white;
}

Décalage

div.menu2 {
	width:150px;
}

div.menu2 ul
{
	width:150px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

div.menu2 li
{
	text-align: center ;
	margin:0;
}

div.menu2 li a
{
	width: 146px;
	line-height: 21px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	display: block ;
	color:#CCF;
	text-decoration: none;
	border:2px solid #115;
	background:#113;
}

div.menu2 li a:first-letter {
	color:#fff;
}

div.menu2 li a:hover
{
	margin-left:6px;
	width: 144px;
	color:white;
	background:#226;
}

Relief

div.menu3 {
	width:150px;
}

div.menu3 ul
{
	width:150px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

div.menu3 li
{
	text-align: center ;
	margin:0;
}

div.menu3 li a
{
	width: 150px;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	display: block ;
	color:#CCF;
	text-decoration: none;
	background:#113;
}

div.menu3 li a:first-letter {
	color:#fff;
}

div.menu3 li a:hover
{
	margin-top:0px;
	width: 140px;
	line-height: 19px ;
	color:white;
	background:#226;
	border-left:5px solid #aaE;
	border-top:3px solid #aaE;
	border-right:5px solid #113;
	border-bottom:3px solid #113;
}

Mise en avant

div.menu4 {
	width:150px;
}

div.menu4 ul
{
	width:150px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

div.menu4 li
{
	text-align: center ;
	margin:0;
	padding:0px 4px;
}

div.menu4 li a
{
	width: 132px;
	line-height: 21px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	display: block ;
	color:#CCF;
	text-decoration: none;
	background:#113;
	margin-left:7px;
	margin-right:7px;
	border:2px solid #115;
}

div.menu4 li a:first-letter {
	color:#fff;
}

div.menu4 li a:hover
{
	border:0px;
	margin:0px;
	width: 150px;
	line-height: 25px;
	color:white;
	background:#226;
	font-size:1.3em;
}

Menu horizontal

div.menu5 {
}

div.menu5 ul
{
	margin:0;
	padding:0;
	list-style-type: none ;
}

div.menu5 li
{
	margin:0;
	float:left;
	text-align: center ;
}

div.menu5 li a
{
	width: 146px;
	line-height: 21px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	display: block ;
	color:#CCF;
	text-decoration: none;
	background:#113;
	border:2px solid #115;
}

div.menu5 li a:first-letter {
	color:#fff;
}

div.menu5 li a:hover
{
	border:0px;
	margin:0px;
	width: 150px;
	line-height: 25px;
	color:white;
	background:#226;
}