Kwicks et menu déroulant : comment les combiner ?

4 mars 2010 à 15:53:15

Bonjour !

Je suis nouveau sur le forum du SdZ. Je vous explique rapidement ma situation (vous pouvez passer ce paragraphe) : je débute en programmation de site internet, et je m'entraine. J'ai fait les tutos XHTML/PHP/Javascript sur le SdZ et parcouru pas mal d'autres sites et j'essaye en ce moment de réaliser mon premier "vrai" site. Il est probable que je posterai plein d'autres messages dans d'autres sections du forum le moment venu...Pour l'heure, je m'acharne sur la réalisation d'un joli menu. Je sollicite votre indulgence : encore une fois, je débute tout juste...

L'idée est de combiner l'effet Kwicks que l'on peut voir ici (exemple 1) et un menu accordéon avec jQuery. Au passage de la souris, j'aimerais donc faire bouger les images du menu, et avec un clic sur l'image, faire apparaitre le sous-menu correspondant, de préférence de la même taille que l'image dont il découle, avec un slideDown. Il faudrait également que le sous-menu se replie quand la souris quitte la zone.
Le problème est que j'arrive à faire l'un OU l'autre, mais impossible à mon niveau de combiner les deux. Le problème doit être tout bête (je soupçonne fortement le CSS de me pourrir la vie et notamment la taille des "li") mais j'ai beau essayer de modifier ligne par ligne pour essayer de corriger, pas moyen. Il y a pourtant des fois où je sens que je suis tout près de réussir. Aidez-moi s'il vous plait.

Voici le code fautif :

Le menu en HTML (c'est un site de cuisine que j'essaye de faire) :

<ul class="navigation"> 
	
	<li class="titrecategorie"><a href="#"> <img src="<?php echo ROOTPATH; ?>/images/menucocktail.png" alt="Menu Cocktails" title="Menu cocktails"/></a>
	<ul class="sousmenu"> 
		<li><a href="#" title="Aller à l'accueil des cocktails">Accueil Cocktails</a></li>  
		<li><a href="#" title="Cocktails sans alcool">Cocktails sans alcool</a></li> 
		<li><a href="#" title="Cocktails avec alcool">Cocktails avec alcool</a></li>
		<li><a href="#" title="Recherche d'un cocktail">Recherche d'un cocktail</a></li> 
	</ul> 
	</li>		
 
	<li class="titrecategorie"><a href="#"> <img src="<?php echo ROOTPATH; ?>/images/menuamuse.png" alt="Menu Amuse-gueules" title="Menu Amuse-gueules"/></a>
	<ul class="sousmenu"> 
		<li><a href="#" title="Aller à l'accueil des amuse-gueules">Accueil des amuse-gueules</a></li>  
		<li><a href="#" title="amuse-gueule chaud">Chauds</a></li> 
		<li><a href="#" title="Amuse-gueule froid">Froids</a></li>
		<li><a href="#" title="Recherche d'un apéritif">Recherche d'un amuse-gueule</a></li> 
	</ul> 
	</li> 
		
	<li class="titrecategorie"><a href="#"> <img src="<?php echo ROOTPATH; ?>/images/menuentrees.png" alt="Menu Entrées" title="Menu Entrées"/></a> 
	<ul class="sousmenu"> 
		<li><a href="#" title="Aller à l'accueil des entrées">Accueil des entrées</a></li>  
		<li><a href="#" title="Entrées chaudes">Chaudes</a></li> 
		<li><a href="#" title="Entrées froides">Froides</a></li>
		<li><a href="#" title="Recherche d'une entrée">Recherche d'une entrée</a></li> 
	</ul> 
	</li>
		
	<li class="titrecategorie"><a href="#"> <img src="<?php echo ROOTPATH; ?>/images/menuplat.png" alt="Menu Plats" title="Menu Plats"/></a> 
	<ul class="sousmenu"> 
		<li><a href="#" title="Aller à l'accueil des plats">Accueil des plats</a></li>  
		<li><a href="#" title="Plats végétariens">Plats végétariens</a></li> 
		<li><a href="#" title="Plats avec viande">Plats avec viande</a></li>
		<li><a href="#" title="Recherche d'un plat">Recherche d'un plat</a></li> 
	</ul> 
	</li>
		
	<li class="titrecategorie"><a href="#"> <img src="<?php echo ROOTPATH; ?>/images/menudessert.png" alt="Menu Desserts" title="Menu Desserts"/></a> 
	<ul class="sousmenu"> 
		<li><a href="#" title="Aller à l'accueil des desserts">Accueil des desserts</a></li>  
		<li><a href="#" title="dessert d'hiver">Desserts d'hiver</a></li> 
		<li><a href="#" title="dessert d'été">Desserts d'été</a></li>
		<li><a href="#" title="Recherche d'un dessert">Recherche d'un déssert</a></li> 
		</ul> 
		</li>
	
	<li class="titrecategorie"><a href="#"> <img src="<?php echo ROOTPATH; ?>/images/menurecherche.png" alt="Recherche" title="Recherche"/></a> </li>
 
</ul>

Le javascript : (inspiré du topic-ci)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js"></script>
		
<script type="text/javascript">
	$(function () {
		$('.sousmenu').hide();
				
		$().ready(function() {
			$('.navigation').kwicks({
			max: 200,
			spacing:  10
			             });
		});
				
		$('.titrecategorie').click(function() {
			$(this).children('.sousmenu').slideDown('normal');
				}, function() {				
			$(this).children('.sousmenu').slideUp('normal');
				});
				
	});
</script>

Et enfin le CSS : (ne faites pas attention aux couleurs qui au final ne donnent rien, j'ai mis des couleurs affreuses justement pour repérer les modifications plus facilement).

.navigation{
width:750px;
position:absolute;
margin-top:-50px; //comme vous pouvez le voir, j'ai aussi des problèmes de positionnement, mais bon...comme ça ça marche.
margin-left:100px;
}

.navigation li{        
width: 72px;  
height: 72px; 
list-style:none;       
} 

.sousmenu li{
width:150px;
height:20px;
}
 
.titrecategorie{
float: left;
margin: 0; 
padding: 0;
text-align: center;
background-color: blue; 
font: 1.2em "Trebuchet MS", sans-serif; 
}
 
.sousmenu a{ 
display: block; 
padding: 4px 10px; 
color: green;	
}

Golmote

4 mars 2010 à 20:42:56

Houlaaa... Euh tu testes sous quel navigateur ? Car sous FF, ton code actuel donne un truc assez atroce... :euh:

Roswell

5 mars 2010 à 11:58:03

Oui pardon hier j'ai un peu pété les plombs, mais faut me comprendre, ça fait deux semaines facilement que je passe juste sur ce menu. Du coup j'ai copié/collé la dernière mouture (qui doit être au moins la 57541ème). Je sais que je n'aurais pas dû appeler à l'aide et continuer à apprendre.
Je teste donc sur IE et Firefox.
Et paf, ce matin, j'ai enfin trouvé une combinaison qui marche telle que je le voulais...Encore une fois, ce n'est pas beau à cause du CSS, mais je m'en occuperai plus tard. (Encore que chez moi, avec les images qui correspondent, ça va encore à peu près.

</code>
<script type="text/javascript">

$(document).ready( function () { 
    
    $(".navigation ul.sousmenu").hide(); 
	
	$(".navigation li.titrecategorie > a").click( function () {
	if ($(this).next("ul.sousmenu:visible").length != 0) { 
            $(this).next("ul.sousmenu").slideUp("normal"); 
        } 
	else { 
            $(".navigation ul.sousmenu").slideUp("normal"); 
            $(this).next("ul.sousmenu").slideDown("normal"); 
        } 
 } ) ;
} ) ;

$().ready(function() {
		$('.navigation').kwicks({
		max: 200,
		spacing:  10
});
});
 
</script>

Mais maintenant, j'ai un double problème...
Le premier doit être *relativement* simple à résoudre (et ce sera l'objectif de la journée) : quand la souris sort de l'image qui sert de point d'entrée au menu, paf, le sous-menu disparait avant qu'on puisse cliquer.
Le second problème est plus déroutant, aussi je demanderais volontiers votre aide : ça fait ce que je veux, mais pas systématiquement...Après deux ou trois essais de clics dans la barre de navigation, le clic devient inefficace et le sous-menu ne se déroule plus. Les images bougent toujours grâce à kwicks, mais plus trace des sous-menus. Une idée de l'origine du problème ?

Golmote

5 mars 2010 à 12:24:58

Un lien vers la page online serait vraiment un plus...

Parce que là, avec les HTML et CSS du début, ça rend toujours absolument rien chez moi... :euh:

Roswell

5 mars 2010 à 12:47:10

Oui j'étais justement en train de me dire qu'il fallait que je mette en ligne cette chose. Je vais tâcher de le faire dans l'après-midi. Merci pour le soutien psychologique, en tout cas

Golmote

5 mars 2010 à 12:51:34

De rien. (Je poste juste pour que tu puisses reposter cet après-midi

)

Roswell

15 mars 2010 à 16:24:46

Bon, me voilà de nouveau...J'avance sur pas mal de fonctionnalités de mon futur super site de cuisine : le module d'inscription et d'espace membres (pas en ligne) et je bosse sur la BDD des recettes, je ne vais d'ailleurs pas tarder à solliciter vos opinions...Mais toujours rien de neuf pour le menu principal. Gênant vu qu'il est sensé être partout. Bref, si quelqu'un peut m'orienter dans la bonne direction, merci !

Je rappelle les soucis en cours :
- principalement, la double-fonction que j'essaye de mettre en place ne marche qu'un nombre limité de fois. Essayez par vous-même : au premier chargement de la page, la plupart des sous-menus apparaitront au clic, mais après quelques essais, paf plus rien. Une idée ?
- secondairement (mais je ne désespère pas de trouver la réponse tout seul) : le comportement du sous-menu n'est pas optimal : outre qu'il n'apparait pas à chaque fois, il disparait surtout dès que la souris quitte l'image. Dans un monde idéal, il resterait affiché jusqu'à ce que l'utilisateur choisisse effectivement une sous catégorie.

Le site fautif : ici.

Je sais que je me complique la vie pour un truc au final pas sensationnel. Mais je me dis que si je comprends un jour le comment du fonctionnement d'un tel enchainement de scripts, j'aurai fait un grand pas dans la compréhension globale du JS. Donc je m'accroche. J'ai peut-être tort.

ledzep

21 décembre 2010 à 15:15:35

Bonjour,
je suis également à me prendre la tête avec kwick.

Avez vous résolu vos problèmes et comment ?

merci
alain