[RÉGLÉ] Menu style dropline

[titi222]

Bonjour,

J'ai créé mon propre template tout simple sous J1.6 et j'aimerai créer un menu de type dropline comme avec JaPurity2.

Mais JaPurity2 étant beaucoup trop complexe à comprendre, j'aimerai juste trouver un module qui puisse faire cela ?

Ou pouvoir adapter le super tuto de joomlack de façon à ce que les sous menus restent uniquement affichés si on est actuellement dans ce menu (au lieu de disparaitre) ?

Merci d'avance pour votre aide

[ced1870]

Re : Menu style dropline

je pense que tu peux essayer avec la classe active du parent, par exemple

ul.menu_imagedropline#imagedropline li.active ul,
ul.menu_imagedropline#imagedropline li.parent:hover ul,
ul.menu_imagedropline#imagedropline li.parent li.parent:hover ul {
    float: left;
    position: absolute;
    left: 0;
    width: 100%;
    height: 30px;
    background: #555;
    padding: 0;
    margin: 0;
} 

[titi222]

Re : Menu style dropline

Merci Ced

Effectivement c'est ce que j'essayai désespérément de faire mais cela ne marchait pas.
Ton code était identique au mien.
Je viens de comprendre pourquoi, j'utilise des "separator" dans mon menu, il fallait donc que je rajoute ces cas pour que cela fonctionne.

Si ça peut aider quelqu'un je mets mon code :

ul.menu_menu_dropline#menu_dropline { height: 40px; width: 100%; background: #333; position: relative; }
ul.menu_menu_dropline#menu_dropline li {list-style: none; border: none; background: none; float: left; padding: 0; margin: 0;}
ul.menu_menu_dropline#menu_dropline li li { list-style: none; border: none; background: none; float: left; margin: 0px; }
ul.menu_menu_dropline#menu_dropline a, ul.menu_menu_dropline#menu_dropline span.separator { display: block; font-size : 14px; color:#fff; text-shadow: 1px 1px 1px #000; border-right: 2px groove #000; line-height: 20px; height: 20px; text-decoration: none; padding : 0 5px;}
ul.menu_menu_dropline#menu_dropline li:hover, ul.menu_menu_dropline#menu_dropline li a:hover, ul.menu_menu_dropline#menu_dropline li:hover, ul.menu_menu_dropline#menu_dropline li span.separator:hover { color: #f00; cursor: pointer; }
ul.menu_menu_dropline#menu_dropline li.parent li a, ul.menu_menu_dropline#menu_dropline li.parent li span.separator { display: block; font-size : 12px; color: #fff; text-shadow: 1px 1px 1px #000; border-right: 2px groove #000; line-height: 20px; height: 20px; text-decoration: none; padding: 0 5px; margin: 0; background: none;}
ul.menu_menu_dropline#menu_dropline li.parent li a:hover, ul.menu_menu_dropline#menu_dropline li.parent li span.separator:hover { color: #f00; }
ul.menu_menu_dropline#menu_dropline li.parent ul, ul.menu_menu_dropline#menu_dropline li.parent li.parent ul { float: left; position: absolute; left: -999em; margin: 0; padding: 0;}
ul.menu_menu_dropline#menu_dropline li.parent:hover ul, ul.menu_menu_dropline#menu_dropline li.parent li.parent:hover ul { float: left; position: absolute; left: 0; width: 100%; height: 20px; padding: 0; margin: 0; background: #333 /*#434343*/;}
ul.menu_menu_dropline#menu_dropline li.active ul { float: left; position: absolute; left: 0; width: 100%; height: 20px; padding: 0; margin: 0; background: #333 /*#434343*/;}
ul.menu_menu_dropline#menu_dropline li.active>a, ul.menu_menu_dropline#menu_dropline li.active>span.separator, ul.menu_menu_dropline#menu_dropline li.current>a, ul.menu_menu_dropline#menu_dropline li.current>span.separator, ul.menu_menu_dropline#menu_dropline li li.current>a, ul.menu_menu_dropline#menu_dropline li li.current>span.separator { color: #f00;}