Bonjour,
j'ai trouvé ce tuto qui m'a permis de réaliser un menu simple :
Vraiment merci pour ce tuto !
http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
j'aimerais maintenant y rajouter de l'ajax afin d'avoir des sous menu et qui s'affiche au click, mais comment faire svp?
Pour le moment j'ai sa :
donc l'item 5 n'est pas afficher et quand on clique dessus il s'affiche, mais il ne disparait plus ?
et aussi si j'ai une page dessous le menu, il ne s'affiche pas dessus il décale tout l'image, comment faire svp?
merci d'avance
Modifié par 6l20 (29 Jul 2009 - 11:36)
j'ai trouvé ce tuto qui m'a permis de réaliser un menu simple :
Vraiment merci pour ce tuto !
http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
j'aimerais maintenant y rajouter de l'ajax afin d'avoir des sous menu et qui s'affiche au click, mais comment faire svp?
Pour le moment j'ai sa :
donc l'item 5 n'est pas afficher et quand on clique dessus il s'affiche, mais il ne disparait plus ?
et aussi si j'ai une page dessous le menu, il ne s'affiche pas dessus il décale tout l'image, comment faire svp?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html lang="fr">
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
<head>
<title>Construction de menus simples en XHTML/CSS: menu horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
/*********************************/
/* Menu horizontal (items flottants) */
/*********************************/
#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: #c00 ;
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: #900 ;
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>Menu horizontal</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" onclick="$('sous_nav').appear(); return false;">item5</a>
<ul id="sous_nav" style="display:none;" >
<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>
</li>
</ul>
<p><a href="/tuto/lire/574-Creer-des-menus-simples-en-CSS.html" title="">retour au tutoriel</a></p>
</body>
</html>
merci d'avance
Modifié par 6l20 (29 Jul 2009 - 11:36)
