Scribd
Importer
2 vues18 pages

Menu

Le document décrit la création d'un menu en HTML avec quatre pages liées, suivi de la mise en forme de ce menu à l'aide de CSS. Il explique comment utiliser des balises <nav> pour cibler le menu, supprimer les puces, modifier le comportement des éléments de liste, et appliquer divers styles pour améliorer l'apparence. Enfin, il aborde l'interaction utilisateur avec des styles pour les liens au survol.

Transféré par

browrtsumbu3
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2 vues18 pages

Menu

Le document décrit la création d'un menu en HTML avec quatre pages liées, suivi de la mise en forme de ce menu à l'aide de CSS. Il explique comment utiliser des balises <nav> pour cibler le menu, supprimer les puces, modifier le comportement des éléments de liste, et appliquer divers styles pour améliorer l'apparence. Enfin, il aborde l'interaction utilisateur avec des styles pour les liens au survol.

Transféré par

browrtsumbu3
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Application :

a. Création du squelette de notre menu en HTML


Commençons donc par créer le squelette de notre menu. On va imaginer
un menu comportant quatre éléments.
Je commence donc par créer quatre autres pages que je vais appeler
admettons [Link], [Link], [Link] et [Link] pour mon
exemple.
Ensuite, je crée ma liste dans ma page [Link] qui représente la page
d’accueil de mon site. Dans chaque élément de ma liste, je crée donc un
lien relatif vers une autre page de mon site.
Nous avons donc pour le moment une liste classique de liens. Apres test,
ça doit donner comme ceci sur le navigateur :
a. Mise en forme de notre menu à partir du CSS
b.

Maintenant, on va s’attaquer à la mise en forme de notre menu grâce au


CSS.
Tout d’abord, nous allons entourer notre menu avec des balises HTML
<nav> qui ont été créées spécifiquement pour les menus et qui va vous
permettre de ne cibler que la liste correspondant à votre menu en CSS.

Nous allons également lier un fichier [Link] à notre page [Link].


La première chose à faire en CSS va être de supprimer les puces de notre
menu et d’effectuer un reset CSS des marges intérieures et extérieures
afin que notre menu s’affiche exactement de la même façon dans tous
les navigateurs.
Voici comment on va faire cela :
Ça doit donner comme suit sur le navigateur :
Ensuite, on veut que les éléments de notre menu se placent les uns à
côté des autres et non pas les uns sous les autres. Pour faire cela, nous
allons devoir modifier le comportement par défaut des éléments li. Par
défaut, ces éléments sont de type block. On va modifier leur type en
inline-block grâce à la propriété display.
Ensuite, on peut harmoniser la taille des éléments de notre menu avec les
propriétés width et height.
On peut également leur appliquer des bordures légères sur nos éléments
de liste.
On s’aperçoit alors qu’il y a un petit écart entre les éléments
(normalement, les différents éléments devraient être collés à la bordure
sur leur gauche).
Pour y remédier, il suffit de supprimer les espaces dans notre code entre
les éléments en question, en collant des commentaires au milieu par
exemple.
On peut continuer et centrer le texte horizontalement à l’intérieur de nos
éléments avec la propriété text-align.
On peut également le centrer verticalement en rusant un peu en
appliquant un line-height avec une valeur égale à la valeur de la
propriété height à nos éléments li.
On peut encore supprimer la mise en forme par défaut des liens avec les
propriétés textdecoration et color et ajouter une couleur de fond à notre
menu.
On va maintenant faire en sorte que les liens occupent tout l’espace à
l’intérieur des éléments li afin que vos visiteurs puissent cliquer n’importe
où sur votre menu.
Pour cela, on va transformer leur type en type block.
Finalement, on peut appliquer un style différent aux éléments de notre
menu lorsque vos visiteurs passent leur souris dessus ; en utilisant le
pseudo-format :hover.

Vous aimerez peut-être aussi