-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathpage-active.html
163 lines (151 loc) · 6.38 KB
/
page-active.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Indication de la page active dans le menu de navigation - Démonstrations - Guide de l'intégrateur - RGAA 3.0</title>
<link rel="stylesheet" href="../css/demo.css" media="screen">
<link rel="stylesheet" href="../css/navigation.css" media="screen">
<script src="../../js/highlight.pack.js"></script>
<link rel="stylesheet" href="../../css/tomorrow-night-eighties.css" media="screen">
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<header role="banner" class="main-header">
<div class="inside">
<h1>Guide de l'intégrateur</h1>
<p><a href="../../2-navigation.md">Revenir à la fiche pratique « Navigation »</a></p>
</div>
</header>
<div id="wrapper">
<nav role="navigation" class="nav-demo" id="nav">
<h2>Listes des démonstrations</h2>
<ul>
<li class="level"><span>Navigation</span>
<ul>
<li><a href="../2-navigation/access-rapide.html">Liens d'accès rapide</a></li>
<li><a href="../2-navigation/collection.html">Collection de pages</a></li>
<li><a href="../2-navigation/page-active.html">Indication de la page active</a></li>
</ul>
</li>
<li><a href="../5-liens/index.html">Liens</a></li>
<li class="level"><span>Formulaires</span>
<ul>
<li><a href="../6-formulaires/etiquettes.html">Étiquettes de champs</a></li>
<li><a href="../6-formulaires/aides-controles-saisie.html">Aides à la saisie</a></li>
<li><a href="../6-formulaires/regroupement.html">Regroupement de champs</a></li>
</ul>
</li>
<li><a href="../7-focus/index.html">Focus</a></li>
<li><a href="../9-images/index.html">Images</a></li>
<li><a href="../11-agrandissement-des-caracteres/index.html">Agrandissement des caractères</a></li>
</ul>
</nav>
<main role="main" id="main">
<section>
<h2 class="fiche-title">Navigation - Indication de la page active dans le menu de navigation - Démonstrations</h2>
</section>
<article class="article" id="article1">
<h3 class="right">Conforme : Mise en évidence par la couleur, la forme et l'ajout d'un <code>title</code> sur le lien.</h3>
<div class="col-2-3">
<nav role="navigation" class="nav-principale clear" aria-label="navigation principale">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos projets</a></li>
<li><a href="#" title="Nos formations page active" class="active">Nos formations</a></li>
<li><a href="#">Nos produits</a></li>
<li><a href="#">Nous contacter</a></li>
<ul>
</nav>
</div>
<pre class="col-1-3"><code class="code html"><ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos projets</a></li>
<li>
<a href="#"
title="Nos formations page active" class="active">
Nos formations
</a>
</li>
<li><a href="#">Nos produits</a></li>
<li><a href="#">Nous contacter</a></li>
<ul></code>
<code class="code css">a{
text-decoration:none;
background:#933C53;
}
a.active{
text-decoration:underline;
background:#933C53;
}</code></pre>
</article>
<article class="article" id="article2">
<h3 class="right">Conforme : Mise en évidence par la couleur et l'ajout d'un <code>title</code> sur le lien.</h3>
<div class="col-2-3">
<nav role="navigation" class="nav-principale clear" aria-label="navigation principale">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos projets</a></li>
<li><a href="#" title="Nos formations page active" class="active2">Nos formations</a></li>
<li><a href="#">Nos produits</a></li>
<li><a href="#">Nous contacter</a></li>
<ul>
</nav>
</div>
<pre class="col-1-3"><code class="code html"><ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos projets</a></li>
<li>
<a href="#"
title="Nos formations page active" class="active">
Nos formations
</a>
</li>
<li><a href="#">Nos produits</a></li>
<li><a href="#">Nous contacter</a></li>
<ul></code>
<code class="code css">a{
text-decoration:none;
background:#933C53;
}
a.active{
background:#933C53;
}</code></pre>
</article>
<article class="article" id="article3">
<h3 class="wrong">Non conforme : Mise en évidence par la couleur et par la forme seulement.</h3>
<div class="col-2-3">
<nav role="navigation" class="nav-principale clear" aria-label="navigation principale">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos projets</a></li>
<li><a href="#" class="active">Nos formations</a></li>
<li><a href="#">Nos produits</a></li>
<li><a href="#">Nous contacter</a></li>
<ul>
</nav>
</div>
<pre class="col-1-3"><code class="code html"><ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos projets</a></li>
<li><a href="#" class="active">Nos formations</a></li>
<li><a href="#">Nos produits</a></li>
<li><a href="#">Nous contacter</a></li>
<ul></code>
<code class="code css">a{
text-decoration:none;
background:#933C53;
}
a.active{
text-decoration:underline;
background:#933C53;
}</code></pre>
</article>
</main>
<footer id="footer" role="contentinfo" class="clear">
<h2>Licence d'utilisation</h2>
<p class="logo-smgap"><a href="http://references.modernisation.gouv.fr/"><img src="../img/modernisation-logo.jpg" alt="Secrétariat général pour le modernisation de l'action publique"></a></p>
<p>Ce document est la propriété du Secrétariat général à la modernisation de l'action publique français (SGMAP). Il est placé sous la <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence">licence ouverte 1.0 ou ultérieure</a>, équivalente à une licence <i lang="en">Creative Commons BY</i>. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le <a href="https://github.com/DISIC">compte <span lang="en">GitHub</span> de la DInSIC</a>.</p>
</footer>
</div>
</body>
</html>