SP CSS – Etude menu déroulant par Stéphane MICHEL • Etude du

SP CSS – Etude menu déroulant par Stéphane MICHEL
Lien du menu étudié à partir du site cssplay : http://www.cssplay.co.uk/menus/cssplay-ipad-flyout-menufixed.html
 Etude du code HTML sans CSS
Le code HTML pour réaliser ce menu comprend une liste de base dont les éléments (flèches rouge)
forment le bloc principal. Certains éléments comprennent ensuite des listes imbriquées sur un ou plusieurs
niveau selon les besoins (flèches verts, bleu ou rose). L’ensemble est contenu dans une balise <div> (encart
orange).

Etude du code CSS
La mise en forme du menu ainsi que son animation sont réalisés à l’aide des propriétés CSS. Nous pouvons
en voir un aperçu ci-après :
Au niveau de la mise en forme nous pouvons par exemple noter l’effet de dégradé ainsi que les bords
arrondis des différents blocs. Ceux-ci sont obtenu à l’aide du code suivant, et plus particulièrement les
propriétés background-image pour les dégradés et border pour les coins arrondis.
Pour ce qui est de l’animation du menu, son état initial quand il n’y a pas de survol est le suivant :
L’aperçu ci-contre contient bien le code complet, aussi bien HTML que CSS, et
pourtant nous ne voyons pas la totalité des éléments.
Pour trouver l’explication il faut analyser l’extrait de code suivant :
Cette partie du code va agir sur un ul descendant d’un ul et contenu dans un
élément ayant comme id menu .
Les propriétés position, left, margin-top et margin-left nous donnent des
indications sur la placement des blocs les uns par rapports aux autres :
-
Left :100%  place l’élément directement contre le bord droit de
l’élément placé sur sa gauche.
Margin-top :-31px :décale l’élément de 31px vers la bas.
Margin-left :-8px : décale l’élément de 8px vers la gauche.
Il reste la propriété display , qui avec son attribut none nous indique que les
éléments qu’elle va affecter sont masqués. Ceci explique donc pourquoi sur
l’aperçu précédent nous ne visualisons que le bloc principal et non les blocs
descendant.
Afin de bien comprendre le rôle de l’attribut none, voici ce que nous obtenons en remplaçant celui-ci par
block :
Ici chacune des listes du
code HTML est affichée
dans son bloc avec la mise
en forme prévu par les
CSS.
Ceci illustre bien la
différence entre l’attribut
none et l’attribut block
pour cette propriété
display.
Sur l’exemple ci-dessus nous pouvons voir le placement des blocs qui a été décrit plus haut. L’exemple cidessous nous montre les mêmes éléments avec simplement les propriétés margin-top et margin-left
modifiées
Margin-top :-31px  50px
Margin-left :-8px  20px
On constate bien le décalage par
rapport aux valeurs d’origines.
Intéressons-nous maintenant à l’extrait de code qui permet de dérouler les sous-menu quand on survol
certains éléments. Tout d’abord voici ce que l’on obtient si l’on déroule le menu sur plusieurs niveau :
C’est dans l’extrait de code suivant que cela se passe :
Cet extrait de code agit sur un ul qui est fils d’un li qui est survolé et qui est descendant d’un ul. C’est la
propriété display avec son attribut block qui permet d’obtenir ce que l’on voit sur l’extrait ci-dessus.
Faisons l’essai en remplaçant block par none :
Nous pouvons constater que même lorsque nous
survolons un éléments il n’y a pas d’effet,
l’éléments descendant n’apparait pas.

Conclusion :
Dans cet exemple c’est donc la propriété display qui joue un rôle primordial avec ses deux attributs none et
block. C’est cette propriété qui va permettre d’afficher ou de masquer des éléments selon les situations.
Ensuite ce sont les propriétés position, left, margin-top et margin-left qui jouent un rôle important pour le
placement des blocs.