Menus et barre de navigation

Un menu est une liste de liens (ul ou ol)

Un menu avec des sous-menus est une liste principale munie de sous-listes de liens :

L'art CSS est de les habiller pour les rendre attratifs, interactifs, efficaces

 

Entrons dans le vif du Sujet

I Etape par étape, construisons un menu horizontal

En premier, supprimons marges et padding qui sont très particulier pour les listes (indentation par défaut)
Puis les puces à liste

Etape 1


La couleur des liens est fixée par défaut par votre navigateur : bleu.. , changeons là sur la balise <a>

Historiquement, les liens ont longtemps repérés par un soulignement Ce n'est plus le cas : on les distingue maintenant :

Etape 2


II De l'interactivité élémentaire à l'aide des pseudo-classes

Les pseudo-classe traduisent les états d'un lien. Un lien peut-être


Il est recommandé de déclarer les pseudo-classes de liens selon l'ordre suivant qui garantit une bonne interprétation par les navigateur :

  1. :link
  2. :visited
  3. :hover, :focus
  4. :active
Etape 3


III Comment rendre la zone cliquable rectangulaire
(sous forme de bouton) ?

Plusieurs solutions simples sont possibles :

  1. En définissant une hauteur de ligne (line-height)
  2. ou en transformant les liens (intialement in-line) en type bloc (display:block)

On pourra alors jouer sur le fond et la bordure

Etape 4


IV Du menu vertical à la barre horizontale

Initialement les éléments li (list-item) sont de type bloc (et donc placés les uns sou les autres). Pour les placer horizontalement, il existe 3 méthodes standard :

Etape 4


ATTENTION compatibilité
La propriété "bloc-inline" n'étant supportée qu'à partir de IE8+, pour couvrir les navigateurs anciens ont préférera la propriété "float" (voir section suivante)
Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Voici un menu horizontal, tenter le d'abord avec des rectangles droits (on tentera les obliques dans un second temps avec l'attribut transform (cf plus loin)
transform:  skewX(18deg) ; )

Voici quelques données sur les attributs (incomplets ... à compléter)

Demander le corrigé à votre enseignant, il est prêt