[Résolu] Menu liste et infobox

Bonjour,

Souhaitant rendre plus accessible un menu tableau en cascade utilisant du javascript, j'ai utilisé des balises de liste ul li.

Je souhaite garder l'apparition de boites d'informations au survol des liens et qu'elles disparaissent au survol du lien de la seconde liste (Lien 1 et Lien 2).

Est ce réalisable en css? Sinon comment obtenir le résultat proprement en javascript?

<ul>
    <li><a href="#">Rubrique 0</a></li>
    <li>
        <a href="#">Rubrique 1</a>
        <ul>
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
        </ul>
    </li>
    <li><a href="#">Rubrique 2</a></li>
</ul>

Modifié par K3p' (14 Feb 2014 - 09:56)

je ne suis pas du tout d'avoir bien compris ce que tu voulais mais je pense qu'il t suffit de mettre une balise title dans tes balise <li>

Je souhaite afficher au survol du lien de ma première liste un commentaire en dessous de mon menu.


Mon menu est fixe, en cascade et il faut qu'au survol de la seconde liste de liens elle ne soit plus apparente (la boite d'infos). Je peux difficilement être plus clair.

Salut,
Je ne pense pas que cela soit possible uniquement en css, car on ne peut accéder que à des éléments de même niveau ou inférieur, mais pas remonter dans l'arborescence. ( On ne peut par exemple pas faire un #id1:hover #id2 pour modifier le css d'id2 qui serait n'importe ou dans la page sur un hover de id1)

Pour montrer le mieux que j'arrive a faire juste avec le css j'ai fait ca : http://jsfiddle.net/JY24f/

En gros : quand tu survoles la rubrique1 cela affiche le sous menu et la bulle en bas
Mais quand tu survoles le sous menu, en fait cela continue à survolé la rubrique1 vu que le sous menu est inclus dans la rubrique1 et du coup la petite bulle reste affiché en bas...
(et en fait c'est logique car si au moment où l'on passe sous le sous menu on n’était plus sur considéré comme en train de survoler le menu, le sous menu disparaitrait vu que le :hover deviendrait faux ^^)

Ps Après réflexion en écrivant le post ^^ : On doit éventuellement pouvoir réussir a magouiller quelque chose en rajoutant les infos bulles dans des éléments au même niveau que le sous menu, et les faire apparaitre en dessous du menu via un positionnement absolue par exemple. Dans ce cas la on pourrait sans doute faire une règle pour y accéder et enlever le display.


Edit : hop ayant une idée en écrivant le poste, je viens de tester , ça marche de faire la magouille avec l'info bulle juste a coté :
http://jsfiddle.net/JY24f/1/

Edit 2 : Au final plus simple et logique de mettre l'identifiant cacheX sur l'ul que le li du coup : http://jsfiddle.net/JY24f/2/
Modifié par mathieu1004 (13 Feb 2014 - 16:25)

Merci beaucoup mathieu1004 . C'est tout à fait ce que je voulais.

Je remarque que la boîte est aligné toujours à la même hauteur avec top et suppose qu'il va être compliqué d'adapter cette hauteur en fonction de celle du menu sans passer par JS; Je vais donc suremement la placer à coté du curseur...

Salut,
je ne suis pas sur d'avoir compris le problème du toujours à la même hauteur du top je suppose qu'on parle de l'info bulle qui apparait. Généralement ce n'est pas un soucis car elle pop toujours au même endroit ( ca me semble assez cohérent que l'aide/ explication apparaissent toujours au même endroit). La le problème c'est plus lié au menu qui en général ne se décale pas vers le bas. Il faudrait regarder plus en détails le css des menu déroulant pour que le sous menu apparaissent vraiment sur le coté, pas a moitié au milieu du menu, ça crée un effet moche et peu pratique (genre on survole rubrique 1 ça décale puis quand on va sur rubrique 2 ça remonte et du coup on est trop bas pour la rubrique2 c'est pas super.)

Je me suis seulement intéressé au problème de la boite (et qui dans le principe est fixe , tout comme le menu principale de rubriques) et pas du tout intéressé à styliser le menu ^^.