doccharset="utf-8
download 
Plainte Transcription
charset="utf-8
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>menu demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/ui-darkness/jquery-ui.css">
<style>
.ui-menu
{
width: 100px;
font-size: 12px;
min-height: 22px; /* définit la hauteur minimale du menu (dépendante de la valeur de font-size) */
}
ul#menu
{
width: 500px; /* définit la largeur totale du menu */
}
ul#menu > li
{
width: 100px; /* définit la largeur des items de niveau 1 */
float: left; /* définit le positionnement des items de niveau 1 */
}
</style>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
<li><a href="#">Item 3-3</a></li>
<li><a href="#">Item 3-4</a>
<ul>
<li><a href="#">Item 3-4-1</a></li>
<li><a href="#">Item 3-4-2</a></li>
<li><a href="#">Item 3-4-3</a></li>
<li><a href="#">Item 3-4-4</a></li>
<li><a href="#">Item 3-4-5</a></li>
</ul>
</li>
<li><a href="#">Item 3-5</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script>
// initialise le menu
$("#menu").menu({ position: { using: positionnerSousMenu} });
// remplace la flèche droite par la flèche bas pour les menus de premier niveau
$("#menu > li > a > span.ui-icon-carat-1-e").removeClass("ui-icon-carat-1-e").addClass("ui-icon-carat-1-s");
function positionnerSousMenu(position, elements) {
var options = {
of: elements.target.element
};
if (elements.element.element.parent().parent().attr("id") === "menu") {
// le menu à positionner est de niveau 2 :
// on va superposer le point central du haut du menu sur le point central bas du menu parent
options.my = "center top";
options.at = "center bottom";
}
else {
// le menu à positionner est de niveau > 2
// le positionnement reste celui par défaut : on va superposer le coin haut gauche et le coin haut droit du menu parent
options.my = "left top";
options.at = "right top";
}
elements.element.element.position(options);
};
</script>
</body>
</html>
