23/06/2011, 13:28:51
Bon,
J'ai fait un essai rapidement sur mon notepad++
Je pense être arrivé a quelquechose de fonctionnel à peu près..
Je sais pas si ce que j'ai fait est correct.. j'ai essayé d'obtenir ce que je
voulais avec les propriétés que je connais.
Si il y a une meilleure méthode/meilleures propriétés je veux bien
CSS associé
Le tout visible à cette page : http://whynotyou.fr/ftp2/testmenu/menu.html
EDIT: Question, est-ce que j'aurai des animations fluides en css avec ce type de code (agrandissement vertical de l'item parent - indentation du lien - changement couleur du lien) ?
J'ai fait un essai rapidement sur mon notepad++
Je pense être arrivé a quelquechose de fonctionnel à peu près..
Je sais pas si ce que j'ai fait est correct.. j'ai essayé d'obtenir ce que je
voulais avec les propriétés que je connais.
Si il y a une meilleure méthode/meilleures propriétés je veux bien
Code :
<ul id=menu>
<li class="parent"><a>home</a>
<ul>
<li class="enfant"><a>CV</a></li>
</ul>
</li>
<li class="parent"><a>biographie</a></li>
<li class="parent"><a>contact</a></li>
<li class="parent"><a>biographie</a></li>
<li class="parent"><a>galerie</a>
<ul>
<li class="enfant"><a>Photograhie</a></li>
<li class="enfant"><a>Sport</a></li>
</ul>
</li>
</ul>
CSS associé
Code :
#menu{}
#menu a{text-decoration:underline;}
.parent a:hover{text-indent:10px;}
.parent a:active{text-indent:10px;}
.parent{
display:block;
height:20px;
overflow:hidden;
}
.parent:hover{height:auto; text-indent:10px;}
.parent:active{height:auto;}
.parent ul{}
.enfant{}
.enfant a{}
.enfant a:hover{}
.enfant a:active{}
Le tout visible à cette page : http://whynotyou.fr/ftp2/testmenu/menu.html
EDIT: Question, est-ce que j'aurai des animations fluides en css avec ce type de code (agrandissement vertical de l'item parent - indentation du lien - changement couleur du lien) ?