<html lang="fr">
<head>
<title>Construction de menus simples en XHTML/CSS: portes coulissantes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
/***********************************/
/* Méthode des portes coulissantes */
/**********************************/
#nav {
list-style: none ;
margin: 0 ;
padding: 0 ;
overflow: hidden ; /* Création du contexte de formatage */
}
#nav li {
float: left ;
width: 150px ;
border: 1px solid #600 ;
margin-right: 1px ;
color: #fff ;
background: #c00 ;
}
#nav li a {
display: block ;
background: #900 url(lienCoulissant.png) left top no-repeat ;
color: #fff ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
padding: 4px 0 ;
text-align: center ;
text-decoration: none ;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background: #033 url(lienCoulissant.png) right top no-repeat ;
text-decoration: underline ;
}
--></style>
<!--[if lt IE 7]>
<style type="text/css">
#nav { /* Contexte de formatage pour IE6 */
overflow: visible ;
height: 1% ;
}
</style>
<![endif]-->
</head>
<body>
<h1>Méthode des portes coulissantes</h1>
<ul id="nav">
<li><a href="#" title="aller à la section 1">item1</a></li>
<li><a href="#" title="aller à la section 2">item2</a></li>
<li><a href="#" title="aller à la section 3">item3</a></li>
<li><a href="#" title="aller à la section 4">item4</a></li>
<li><a href="#" title="aller à la section 5">item5</a></li>
</ul>
<p><a href="/tuto/lire/574-Creer-des-menus-simples-en-CSS.html" title="">retour au tutoriel</a></p>
</body>
</html>
facile...
