images dans un menu
avec un fichier image
si on veut mettre une image qui indique quel élément du menu est en "on" ou en "hover", on peut le faire avec un background-image de l'élément <li>
Si on utilise le tag <menu> alors les éléments <li> ont des classes qui s'ajoutent en fonction de leur état. On a ainsi:
| <li> |
| <li class="on"> |
| <li class="hover"> |
| <li class="on hover"> |
on va donc jouer avec ses classes
ajouter une image
styler les on et hover
on ajoute des background en utilisant l'image uploadée. pour que l'image soit placée correctement, il faut probablement jouer avec les padding et margin des <li> et aussi du <a> qui se trouve dans le <li>. il faut noter que le <a> a des padding par défaut
<css padding-top='20px'/>
<css selector='ul li' padding-top='10px' margin-left='80px'/>
<css selector='ul li a' padding-left='0!important'/>
<css selector='ul li.on' background='url(menu-on) no-repeat left top' />
<css selector='ul li.hover' background='url(menu-on) no-repeat left top' />
<css clear='right' float='right'/>
<css use-font='navs'/>
</menu>
avec du css pur
Si l'image qu'on veut mettre est un simple rectangle, alors on peut le créer avec un :before en position absolue, et de taille choisie. Voici un exemple pour un rectangle animé sur le hover:
<css selector='li a:before' opacity='0' width='1px' />
<css selector='li.hover a:before' opacity='1' width='45px' />
<css selector='li.on a:before' opacity='1' width='45px' />
