[RÉGLÉ] Menu et CSS

[Oldric]

Bonjour,

Je souhaiterais avoir de l'aide pour personnaliser un menu. Je précise que je suis débutant avec joomla.

J'essaye de convertir mon site statique et je me retrouve face au problème de formater mon menu.

Dans mon site statique, le HTML était le suivant :

<header>
<nav>
<ul id="menu">
<li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li>
...
</ul>
</nav>
</header>

Le CSS associé :

header {width:360px;float:left}
#menu {padding-top:122px}
#menu > li {width:100%;overflow:hidden;padding-bottom:4px}
#menu > li > a {display:inline-block;font-size:26px;line-height:54px;height:56px;color:#fff;background:#000 ;text-decoration:none;position:relative;letter-spacing:0px;cursorointer}
#menu > li > a span {display:block;background:#fff;position:absolute;w idth:100%;height:100%;top:0;left:0}
#menu > li > a strong {position:relative;display:block;padding:0 95px 0 40px;height:56px}
#menu > li > a:hover, #menu > li > a.active {color:#000}
#menu > li > a:hover strong, #menu > li > a.active strong{}

Mon PHP actuel est :

<header>
<jdoc:include type="modules" name="menu_gauche" />
</header>

et mon CSS actuel:

header {width:360px;float:left}
ul.nav.menu {padding-top:122px}
ul.nav.menu > li {width:100%;overflow:hidden;padding-bottom:4px}
ul.nav.menu > li > a {display:inline-block;font-size:26px;line-height:54px;height:56px;color:#fff;background:#000 ;text-decoration:none;position:relative;letter-spacing:0px;cursorointer}
ul.nav.menu > li > a span {display:block;background:#fff;position:absolute;w idth:100%;height:100%;top:0;left:0}
ul.nav.menu > li > a strong {position:relative;display:block;padding:0 95px 0 40px;height:56px}
ul.nav.menu > li > a:hover, ul.nav.menu > li > a.active {color:#000}
ul.nav.menu > li > a:hover strong, ul.nav.menu > li > a.active strong{}

Le code généré est :
<ul class="nav menu">
<li class="item-466 current active"><a href="/vptest2/index.php/home" >Home</a></li>
<li class="item-467"><a href="/vptest2/index.php/about" >About</a></li>
<li class="item-468"><a href="/vptest2/index.php/portfolio" >Portfolio</a></li>
<li class="item-469"><a href="/vptest2/index.php/services" >Services</a></li>
<li class="item-470"><a href="/vptest2/index.php/contact" >Contact</a></li>
</ul>

Comment faire pour que les balises <span></span> et <strong></strong> soient générées pour pouvoir réutiliser le CSS du menu? Si ce n'est pas possible, quelle est l'alternative?

Merci!
Olivier

[lomart]

Re : Menu et CSS

Bonjour,

Il faut surcharger le code du module mod_menu.
Plus d'infos ici :
La doc Joomla en anglais
Sur kiwik en français

[Oldric]

Re : Menu et CSS

Bonjour,

et merci pour ta réponse! J'ai donc créé une surchage et j'obtiens bien maintenant un codé généré de type
<li class="item-466 current active"><a href="/vptest2/index.php/home" ><span></span><strong>Home</strong></a></li>
comme je le souhaitais.

Seulement les <li> se comportent comme si ils étaient par défaut en :hover
Quel pourrait en être la raison?

Comme je ne suis pas sûr de bien m'exprimer, le CSS doit me permettre d'avoir un menu avec les nom en blanc sur fond noir et passer en nom en noir sur fond blanc quand on passe dessus. Or ils sont par défaut en fond blanc (le texte est bien là!).

Cordialement
Olivier

[Oldric]

Re : Menu et CSS

Hop, trouvé la solution! Merci pour tout!