11548 sujets

JavaScript, DOM et API Web HTML5

Probleme CSS pour menu jquery

Bon, après moultes recherches et test, je me décide à venir vous demander votre aide...
Je semble en éffet incapable de régler mon problème tout seul :'(

Je souhaite mettre en place un menu jquery horizontal . Et en fait j'ai été assez séduit par un exemple de menu vu sur le net:
Il s'agit de celui du site du www.lemonde.fr
Alors je n'ai absolument pas besoin d'un menu sur trois niveaux, deux me suffiront... Mais le site du monde utilise un tableau... Et comme on m'a bien appris a ne pas utiliser de tableau pour faire de la présentation je suis donc parti a la recherche d'une alternative...
Et je suis tombé sur deux exemple qui m'ont servi de base pour essayer de développer mon menu comme je le souhaitais:
http://www.jquery-france.com/un-menu-deroulant-tout-simple-avec-jquery/
N'étant pas totalement convaincu par le format liste, j'ai utilisé de jolies div classée...
Ce qui me donne ça pour le js : 

$(document).ready(function(){
$("#menu_cat").each(function(){
   $(this).mouseover(function(){
     $(this).children("div").slideDown("fast");
         if($.browser.msie) { var hauteur = $(this).children("div a").width(); $(this).children("div a").css({marginLeft:"-"+hauteur+"px"});   }
         $(this).prev().children("div a").fadeOut("fast");
     $(this).siblings().children("div a").fadeOut("fast");
   });
});
});


et cela semble fonctionner...
Malheureusement je suis pas du tout porter sur le design... Et le css me pose beaucoup plus de soucis le bougre ^^

Voila ou j'en suis arrivé:


#menu {
      width:100%;
      font-family:Tahoma, Helvetica, sans-serif;
      letter-spacing: 0.12em;
      display: block;
      margin:0 0 5px 0;
      padding:7px 0 0 0;
      height:37px;
      font-size:1.1em;
      background-color: white;
      z-index:1000;
		      }
       

.menu_cat {

      float: left;

      padding:0 0 0 25px;

      }
      

.menu_cat a {

      color:#4B6B01;

      font-weight:bold;

      text-decoration: none;

      }

       

.menu_cat  a:hover {
		
      color: #000 ;

      }
.lib_cat {
position : relative;
left:0;
}
       
.lib_cat a {
color:#4B6B01;

      font-weight:bold;

      text-decoration: none;

      }

     
.lib_cat  a:hover {

      color: #000 ;

      }


mes deux soucis:
-> bug d'affichage: lors du passage de la souris sur les lien principaux...
les sous categories apparaisse bien sur la ligne en dessous mais la position se modifie de maniere assez aléatoire... Or j'aimerai d'une part obtenir l'aspect pro du site du monde (seulement les deux premiers niveaux) et d'autre part que cela n'utilise pas de tableau ( c'est le mal).



<div id="menu"> 
<?php
foreach($selectMenu->fetchAll() as $menu)
{
?>
	<div class="menu_cat">
		<a  title='<?php echo $menu['libMenu']; ?>' onclick="navigation.page.value='<?php echo $menu['idMenu']; ?>';navigation.submit();" href="#"><?php echo $menu['libMenu'];?></a>
	

	<?php
	$selectSousMenu->execute(array($menu['idMenu']));
		if(($selectSousMenu->rowCount())>>0)
		{
			echo "<div class='lib_cat' style='display : none;'>";
			
			foreach($selectSousMenu->fetchAll()as $sousMenu){
			echo "<a title='".$menu['libMenu']."' href='#le-secteur-des-sports-equestres/'>".$sousMenu['libCategorie']."</a>";
			}
			echo "</div>";
	
		}
	
echo "</div>";
}
?>
</div>



Voila j'espère que quelqu'un pourra m'aider...
Si besoin de plus d'infos n'hésitez pas.

Au passage, j'ai beaucoup de mal a intégrer le positionnement css... J'ai lu beaucoup de tutoriaux... Mais je misère litteralement...
Si vous avez une adresse ou je pourrais m'instruire..
a écrit :
N'étant pas totalement convaincu par le format liste, j'ai utilisé de jolies div classée...

Je pense que pour un menu, une liste (ou des listes emboitées) sont au contraire mieux adaptées que des divs.

Sinon, aurais-tu une page en ligne ?
Tiens, c'est intéressant de voir que certains trouvent le menu de lemonde.fr correct. Pour ma part je le trouve imbuvable (même s'il serait beaucoup plus intéressant avec un affichage des sous-menus au clic plutôt qu'au survol). Je ne recommanderais donc pas un fonctionnement identique.

Ensuite, pour ton problème lui-même, et à moins que tu aies des problèmes dans le fonctionnement du script, je dirais que c'est plus un problème de positionnement CSS. Difficile d'en dire plus sans avoir la page sous les yeux (ce qui permet notamment de tester des solutions avec Firebug).
effectivement en fournissant une url ce serai plus facile de t'aider...

Au niveau de ton positionnement, si je comprend bien ta demande, c'est le sous-menu qui pose soucis.

Il te suffit, pour qu'il soit toujours bien positionné que tu te réfère à l'élément du menu qu'il est censé compléter.

Je m'explique.
(d'ailleur je suis d'accord avec Tymlis pour les menu en liste)

dans un exemple simple, on prend une liste qui servira de menu.


   <ul>
        <li>menu01</li>
        <li>menu02</li>
        <li>menu03</li>
        <li>menu04</li>
        <li>menu05</li>
   </ul>


Au survol du "menu03", on va aller chercher la position du <li> qui l'entoure pour avoir un point de repère pour placer le ss-menu.

Point important, dans un rollHover avec jQuery, il faut savoir que tu peux lui passer 2 fonctions à éxecuter (réf doc) :
La première te sert à activer le survol, la seconde te sert de fonction callback, ainsi au rollOut tu peux exécuter une autre fonction. 


     $("xxx").hover(function(){
      
         // fonction de survol

     },function(){

       // fonction de callBack

     });


Le reste est une histoire de ciblage des éléments html.
Tu récupère la position du LI qui est survolé, et tu donne cette valeur à ton ss-menu...

En espérant t'avoir donné quelques pistes...

Bon courage..

++
tcho
Sujet clos
Aller à