Bonjour,
Je débute en html/jquery/css
En faisant des recherches sur le web pour la réalisation d'un menu en images (car la police souhaité est trop particulière pour faire une liste en texte) je me demande quel est la meilleure méthode :
Ce que je souhaite faire par exemple :
Menu1 Menu2 etc...
SS-Menu1a SS-Menu2a
SS-Menu2a SS-Menu2b etc...
En fait Menu1 ou Menu2 est une images/btn avec un survol d'image et les SS-Menu1a et 1b sont d'autres images avec lien et survol aussi.
Ma question :
- un CSS développé (avec url des images) et dans le html utilisé les balises ul / il avec des class
genre ça : (je n'ai pas encore testé cette solution avec le jquery sur les ss-menus)
.menu {
background-image: url(hover image path);
}
.menu a{
background-image: url(normal image path);
background-repeat: no-repeat;
display: block;
}
.menu a:hover{
background: none;
}
<ul id="btn-menu">
<li class="menu"> <--put your link in here--> </li>
</ul>
ou
- faire appel au images dans le html avec img src (avec tjrs du css mais sans url) (C'est ce que j'ai commencé à faire)
(la class slidessmenu fait appel au jquery (slideDown/Up) pour faire 'descendre les ss-menus)
<div id='btn_dolls'> <div class="slidessmenu">
<a href="#" onMouseOver="btn2.src='btn-dolls_jaune.png'" onMouseOut="btn2.src='btn-dolls.png'"><img src='btn-dolls.png' name='btn2'></a>
<div class="info"> <a href="#"><img src='sousmenudolls.png'></a></div></div></div>
Je souhaite faire un code le plus propre possible, pour optimiser au maximum la fluidité/affichage/mouvement du menu. J'espère être compréhensible, je débute..., Merci d'avance pour vos réponses/aides.
Selon quelques articles trouvés il est mieux de faire appel aux images via le css ou sprite CSS merci pour votre avis.
Christelle
ps: je peux donner plus d'info si nécessaire