forumeurs du soir, bonsoir
A l'aide de ce tutoriel je souhaite faire un menu horizontal qui se déplie horizontalement au clic. En fait j'aimerais qu'il ressemble à ça (le dépliage devant être fait au clic et pas au survol). Mais bon c'est du Css3, risque de prob de compatibilité tout ça tout ça, donc j'essaye d'éviter et j'ai pris le javascript...que je ne maîtrise pas
Du code initial j'ai bidouillé et enlevé ce qui ne semblait pas utile (not. le passage ou les autres menus sont fermés quand on clique sur un nouveau, à priori inutile puisque je n'ai qu'un menu avec sous menu).
Le code donne ca :
Le HTML donne ca
Je mets le css mais je doute que cela soit utile :
Le menu déplié
Le but étant que la partie basse soit au même niveau que la partie haute. Ce qu'on voit est en accord avec le code - pas de soucis (puisque la partie basse est un autre ul) - j'ai testé et bidouillé en mettant la classe subMenu dans les <li>, en virant le <ul> et en mettant li à la place du ul dans le code js mais ça a pas marché
Voila voila. Inutile de dire que je suis totalement désespéré, que j'ai passé la journée entière dessus, que mon historique déborde d'une centaine de sites différents où je pensais trouver la solution et que vous êtes mon dernier espoir...
Modifié par Tea time (21 Dec 2011 - 21:42)
A l'aide de ce tutoriel je souhaite faire un menu horizontal qui se déplie horizontalement au clic. En fait j'aimerais qu'il ressemble à ça (le dépliage devant être fait au clic et pas au survol). Mais bon c'est du Css3, risque de prob de compatibilité tout ça tout ça, donc j'essaye d'éviter et j'ai pris le javascript...que je ne maîtrise pas
Du code initial j'ai bidouillé et enlevé ce qui ne semblait pas utile (not. le passage ou les autres menus sont fermés quand on clique sur un nouveau, à priori inutile puisque je n'ai qu'un menu avec sous menu).
Le code donne ca :
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="sous-menu">' + '<img src="ressources/Icônes/Jpeg/travaux.jpg" width="28" height="220" />' + '<\/a>' ) ;
} ) ;
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").toggle("slow");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(this).next("ul.subMenu").toggle("slow");
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
// -->
</script> Le HTML donne ca
</head>
<body>
<ul class="navigation">
<li class="toggleSubMenu"><span></span>
<ul class="subMenu">
<li><a href="#"><img src="ressources/Icônes/Jpeg/dessin.jpg" width="28" height="220" /></a></li>
<li><a href="#"><img src="ressources/Icônes/Jpeg/illustration.jpg" width="28" height="220" /></a></li>
<li><a href="#"><img src="ressources/Icônes/Jpeg/logotype.jpg" width="28" height="220" /></a></li>
<li><a href="#"><img src="ressources/Icônes/Jpeg/mise en page.jpg" width="28" height="220" /></a></li>
<li><a href="#"><img src="ressources/Icônes/Jpeg/web.jpg" width="28" height="220" /></a></li>
</ul>
</li>
<li><img src="ressources/Icônes/Jpeg/MesLiens.jpg" width="28" height="220" /></li>
<li><img src="ressources/Icônes/Jpeg/CV.jpg" width="28" height="220" /></li>
<li><img src="ressources/Icônes/Jpeg/Contact.jpg" width="28" height="220" /></li>
</ul>
</body>
</html>Je mets le css mais je doute que cela soit utile :
@charset "utf-8";
/* CSS Document */
.navigation {
margin: 0;
padding: 0;
list-style: none;
width: 800px;
}
li {
float: left;
list-style-type: none;
}
Le menu déplié
Le but étant que la partie basse soit au même niveau que la partie haute. Ce qu'on voit est en accord avec le code - pas de soucis (puisque la partie basse est un autre ul) - j'ai testé et bidouillé en mettant la classe subMenu dans les <li>, en virant le <ul> et en mettant li à la place du ul dans le code js mais ça a pas marché
Voila voila. Inutile de dire que je suis totalement désespéré, que j'ai passé la journée entière dessus, que mon historique déborde d'une centaine de sites différents où je pensais trouver la solution et que vous êtes mon dernier espoir...
Modifié par Tea time (21 Dec 2011 - 21:42)
.
