+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][Javascript] Un menu déroulant (/showthread.php?tid=2468)
RE: [Javascript] Un menu déroulant - barst - 27-02-2008
Par contre, je voudrais des précisions sur votre code : c'est du javascript ? je ne reconnais pas vraiment cette façon de coder.
Quelques explications m'arrangerait bien.
Merci d'avance.
RE: [Javascript] Un menu déroulant - Roworll - 27-02-2008
Pour ma part, je suis resté au menu 100% CSS classique.
![[Image: mnu1.jpg]](http://90plan.ovh.net/~furiesin/misc/mnu1.jpg)
J'ai cependant ajouté une petite fonctionnalité pour réduire le menu et ainsi récupérer l'espace à gauche de la fenêtre.
Ca tient en un clic couplé à un peu de JS pour inclure le CSS qui fait la modification de mise en page.
![[Image: mnu2.jpg]](http://90plan.ovh.net/~furiesin/misc/mnu2.jpg)
(Désolé, ce ne sont que des copies d'écran mais toutes ces images proviennent de ma version en local)
RE: [Javascript] Un menu déroulant - joshua - 27-02-2008
j'ai un collegue qui m'a fait un menu déroulant en CSS qui avait la meme qualité qu'un menu javascript. Donc ne pas cdecrier le CSS, plus je peux me passer de js meilleur c'est, pour reserver le JS a des cas ou on en a reellement besoin!!!
afin d'eviter des tas de problemes ^^
RE: [Javascript] Un menu déroulant - Sephi-Chan - 27-02-2008
barst a écrit :Par contre, je voudrais des précisions sur votre code : c'est du javascript ? je ne reconnais pas vraiment cette façon de coder.Il s'agit effectivement de Javascript, développé à l'aide de JQuery, une librairie (ou framework, selon eux) plutôt géniale qui permet entre autre de pouvoir utiliser les sélecteurs CSS et XPath pour désigner des éléments de l'arbre DOM. Le développement est également très facilité grâce à des tas de sucres syntaxiques qui font que coder en Javascript (et Ajax) devient un réel plaisir.
Quelques explications m'arrangerait bien.
Merci d'avance.
Cette librairie est également un petit bijou pour externaliser le Javascript des pages et le déployer en surcouche, permettant ainsi un code non intrusif : l'application reste utilisable sans Javascript.
Je te laisse quelques liens si tu veux en savoir plus :
joshua a écrit :j'ai un collegue qui m'a fait un menu déroulant en CSS qui avait la meme qualité qu'un menu javascript. Donc ne pas cdecrier le CSS, plus je peux me passer de js meilleur c'est, pour reserver le JS a des cas ou on en a reellement besoin!!!Tu n'auras certainement pas la beauté d'un Javascript, à savoir un déroulement progressif, une disparition progressive, etc. avec pour seul outil CSS. Je pense qu'à un moment, il faut se lancer. Non, Javascript ne pose pas de problème (surtout avec l'utilisation de librairies), ce qui n'est pas le cas avec CSS qui est bien moins universel d'un navigateur à l'autre.
afin d'eviter des tas de problemes ^^
Libre à vous de vous priver d'une surcouche qui ajoute de l'esthétisme à votre application, mais sachez que ça ne vous coûte pas grand chose, ni à votre serveur d'ailleurs (les scripts externes se mettent en cache) et que ça peut vous apporter beaucoup. Jetez donc un œil à JQuery UI et je pense que vous verrez Javascript autrement.
Sephi-Chan, ce que les vieux peuvent être frileux !
iffle:
RE: [Javascript] Un menu déroulant - barst - 27-02-2008
Merci ca me semble vraiment très intéressant, je vais potasser car j'ai également quelques effets JS et ca pourrait bien m'aider pour les améliorer
RE: [Javascript] Un menu déroulant - Anthor - 27-02-2008
En fait, le problème que tu exposes vient de la structure de ton menu, l'imbrication des balises empêche de sélectionner directement ce que l'on veut et complique le code.
Avec cette structure
Code PHP :
<?php
<ul id="menu">
<li id="menu-seelies"><a href="">Seelies</a>
<ul id="ssmenu-seelies">
<li><a href="">About Seelies</a></li>
<li><a href="">Preferences</a></li>
<li><a href="" class="disabled">Login</a></li>
<li><a href="" class="disabled">Logout</a></li>
</ul>
</li>
<li><a href="">Home</a></li>
<li id="menu-display"><a href="">Display</a>
<ul id="ssmenu-display">
<li><a href="">List</a></li>
<li><a href="">Thumbnail</a></li>
</ul>
</li>
<li id="menu-news"><a href="">News</a>
<ul id="ssmenu-news">
<li><a href="">Suscribe to newsletter</a></li>
<li><a href="">Unsuscribe</a></li>
</ul>
</li>
</ul>
Ce plugin te donnera exactement ce que tu souhaites, je te laisse evidemment refaire tes css en conséquence.
Code PHP :
<?php
(function($){
$.fn.SeeliesMenu = function(o){
var defaults = {
hoverClass : "menuHover",
delay : 500,
animation : {opacity:"show",height:"show"},
c_animation : {opacity:"hide",height:"hide"},
speed : "normal"
},
over = function(){
var $$ = $(this);
clearTimeout(this.sfTimer);
if (!$$.is("."+o.hoverClass)) {
$$.addClass(o.hoverClass)
.find("ul")
.animate(o.animation,o.speed)
.end()
.siblings()
.removeClass(o.hoverClass);
}
},
out = function(){
var $$ = $(this);
this.sfTimer=setTimeout(function(){
$$.removeClass(o.hoverClass)
.find("ul", this)
.animate(o.c_animation,o.speed);
},o.delay);
};
o = $.extend(defaults, o || {});
var menuHovAr=$("li",this)
.hover(over,out)
.find("a").each(function() {
var $a = $(this), $li = $a.parents("li");
$a.focus(function(){ $li.each(over); })
.blur(function(){ $li.each(out); });
}).end();
return this;
};
})(jQuery);
$(document).ready(function(){
$("#menu li ul").hide();
$("#menu").SeeliesMenu();
});
RE: [Javascript] Un menu déroulant - Sephi-Chan - 27-02-2008
Voilà, la page d'accueil de Seelies et maintenant opérationnelle ! Encore merci Anthor pour ton aide précieuse sur le menu déroulant.
Sephi-Chan