Menu#
Un menu de navigation est un élément essentiel d'un site web qui permet aux utilisateurs de se déplacer facilement entre les différentes pages ou sections. Il se présente généralement sous forme de liste de liens (par exemple : Accueil, À propos, Contact) et est souvent placé en haut, sur le côté ou en bas de la page.
Dans cette partie, vous apprendrez à créer un menu de navigation permettant de passer facilement d'une section à l'autre. Ce menu pourra être intégré directement à votre projet.
Exercice 7#
Créez un menu en haut d'une page qui permet de naviguer entre différentes pages.
Dans le fichier HTML, créez une liste non-numérotée qui contient les noms des différentes sections de la page. Le premier élément est "Haut de page".
Dans la partie CSS, le formatage du menu a déjà été défini au moyen d'un
sélecteur de classe. Pour que celui-ci s'applique au menu, ajoutez, dans le
fichier HTML, la classe menu à l'élément <ul> de la liste.
Pour ajouter les références aux différentes sections, il faut, dans le fichier HTML:
Ajouter un identifiant à chaque section qui est référencée dans le menu.
Ajouter une référence à la section correspondante dans le menu.
Utilisez la balise
<a href="..."></a>en remplaçant les...par le sélecteur d'identifiant correspondant.Exemple:
<li><a href="#section0">Haut de page</a></li>
Modifiez la couleur du menu, du texte, etc.
Éditeur pour le HTML#
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Titre de la page</title>
6 </head>
7 <body>
8 <!-- Ajoutez le menu ici -->
9
10 <h1>Ma page</h1>
11
12 <h2>Section 1</h2>
13
14 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
15 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
16 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
17 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
18 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
19 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
20 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
21 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
22 amet.</p>
23
24 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
25 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
26 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
27 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
28 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
29 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
30 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
31 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
32 amet.</p>
33
34 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
35 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
36 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
37 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
38 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
39 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
40 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
41 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
42 amet.</p>
43
44 <h2>Section 2</h2>
45 <ul>
46 <li>item 1</li>
47 <li>item 2</li>
48 <li>item 3</li>
49 <li>item 4</li>
50 <li>item 5</li>
51 <li>item 6</li>
52 <li>item 7</li>
53 <li>item 8</li>
54 <li>item 9</li>
55 <li>item 10</li>
56 <li>item 11</li>
57 <li>item 12</li>
58 </ul>
59
60 <h2>Section 3</h2>
61
62 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
63 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
64 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
65 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
66 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
67 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
68 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
69 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
70 amet.</p>
71
72 <h2>Section 4</h2>
73
74 <p>Liste de toutes les références utilisées.</p>
75
76 <ol>
77 <li>item 1</li>
78 <li>item 2</li>
79 <li>item 3</li>
80 <li>item 4</li>
81 <li>item 5</li>
82 <li>item 6</li>
83 <li>item 7</li>
84 <li>item 8</li>
85 <li>item 9</li>
86 <li>item 10</li>
87 <li>item 11</li>
88 <li>item 12</li>
89 </ol>
90 </body>
91</html>
Éditeur pour le CSS#
1<style>
2html {
3 scroll-padding-top: 3.5rem;
4}
5
6/* liste du menu */
7.menu {
8 list-style-type: none;
9 margin: 0;
10 padding: 0;
11 display: flex;
12 background-color: #333333;
13 position: sticky;
14 top: 0;
15 height: 3rem;
16}
17
18/* éléments de la liste */
19.menu li a {
20 display: block;
21 color: white;
22 text-align: center;
23 padding: 14px 16px;
24 text-decoration: none;
25}
26
27/* élément sélectionné de la liste */
28.menu li a:hover {
29 background-color: #111111;
30}
31</style>
Solution
Éditeur pour le HTML
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Titre de la page</title>
6 </head>
7<body>
8 <ul class="menu">
9 <li><a href="#home">Haut de page</a></li>
10 <li><a href="#section1">Section 1</a></li>
11 <li><a href="#section2">Section 2</a></li>
12 <li><a href="#section3">Section 3</a></li>
13 <li><a href="#section4">Section 4</a></li>
14 </ul>
15
16 <h1 id="home">Ma page</h1>
17
18 <h2 id="section1">Section 1</h2>
19
20 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
21 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
22 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
23 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
24 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
25 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
26 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
27 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
28 amet.</p>
29
30 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
31 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
32 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
33 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
34 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
35 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
36 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
37 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
38 amet.</p>
39
40 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
41 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
42 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
43 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
44 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
45 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
46 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
47 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
48 amet.</p>
49
50 <h2 id="section2">Section 2</h2>
51 <ul>
52 <li>item 1</li>
53 <li>item 2</li>
54 <li>item 3</li>
55 <li>item 4</li>
56 <li>item 5</li>
57 <li>item 6</li>
58 <li>item 7</li>
59 <li>item 8</li>
60 <li>item 9</li>
61 <li>item 10</li>
62 <li>item 11</li>
63 <li>item 12</li>
64 </ul>
65
66 <h2 id="section3">Section 3</h2>
67
68 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
69 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
70 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
71 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
72 amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
73 nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
74 diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
75 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
76 amet.</p>
77
78 <h2 id="section4">Section 4</h2>
79
80 <p>Liste de toutes les références utilisées.</p>
81
82 <ol>
83 <li>item 1</li>
84 <li>item 2</li>
85 <li>item 3</li>
86 <li>item 4</li>
87 <li>item 5</li>
88 <li>item 6</li>
89 <li>item 7</li>
90 <li>item 8</li>
91 <li>item 9</li>
92 <li>item 10</li>
93 <li>item 11</li>
94 <li>item 12</li>
95 </ol>
96 </body>
97</html>