Navigation de style métro: Système de conception de Canada.ca

  • Bêta
  • Dernière modification : 2021-05-06

Diviser du contenu long et complexe en pages qui se concentrent chacune sur une étape ou une réponse spécifique dont les gens ont besoin avant de passer à l'étape ou à la section suivante. Idéal pour présenter un service ou un processus.

Sur cette page

Quand utiliser cette configuration

Utilisez cette configurtion pour regrouper des pages de tâches connexes et assurer la navigation entre ces pages.

Gardez le nombre de pages liées ensemble à un nombre raisonnable (idéalement 6 ou moins, maximum 8).

Quoi éviter

N'utilisez pas de chiffres lorsque vous utilisez ce modèle pour des étapes séquentielles. Des tests ont montré que les Canadiens ont moins de chances d'arriver à la section dont ils ont besoin si les éléments sont numérotés.

N'utilisez pas de sous-étapes dans cette configuration, puisque nous n'avons pas testé cette variation.

Comment mettre en oeuvre

Cette configuration de conception est toujours en version bêta, et le code est toujours en cours de révision. Utilisez-la avec parcimonue, puisqu'elle peut encore faire l'objet de modifications.

Vous devrez utiliser le CSS provisoire pour utiliser cette configuration de conception.

  1. Page d'index
  2. Page d'étape

1. Page d'index

Quand utiliser cette variante : Utilisez comme page d'accueil pour un ensemble de pages connexes qui utilisent la navigation de style métro. Son utilisation est facultative.

Code
HTML
<h1 property="name" id="wb-cont" class="gc-thickline">[Nom du service]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut [...].</p>
<nav class="provisional gc-subway">
	<h2>Sections</h2>
	<dl>
		<dt>
			<a href="#">[Nom de l'étape ou de la section 1]</a>
		</dt>
		<dd>
			Description de la page. Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</dd>
		<dt>
			<a href="#">[Nom de l'étape ou de la section 2]</a>
		</dt>
		<dd>
			Description de la page. Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</dd>
		<dt>
			<a href="#">[Nom de l'étape ou de la section 3]</a>
		</dt>
		<dd>
			Description de la page. Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</dd>
		<dt>
			<a href="#">[Nom de l'étape ou de la section 4]</a>
		</dt>
		<dd>
			Description de la page. Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</dd>
		<dt>
			<a href="#">[Nom de l'étape ou de la section 5]</a>
		</dt>
		<dd>
			Description de la page. Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</dd>
		<dt>
			<a href="#">[Nom de l'étape ou de la section 6]</a>
		</dt>
		<dd>
			Description de la page. Lorem ipsum dolor sit amet, consectetur adipiscing elit
		</dd>
	</dl>
</nav>
CSS
.provisional.gc-subway {
	border-radius: 0 6px 6px 0;
	border-right: 4px solid #26374a;
	border-top: 4px solid #26374a;
	margin-top: 38px;
}

.provisional.gc-subway dl,
.provisional.gc-subway ul {
	clear: both;
	list-style: none;
	padding-left: 0.57em;
	padding-top: 10px;
	position: relative;
}

.provisional.gc-subway dl dt,
.provisional.gc-subway ul dt {
	border-left: 4px solid #26374a;
	padding: 0 20px 3px 1em;
	font-weight: normal;
}

.provisional.gc-subway dl dt a::before,
.provisional.gc-subway ul dt a::before {
	background-color: #fff;
	border: 3px solid #26374a;
	border-radius: 50%;
	content: "";
	height: 1.2em;
	left: 0;
	position: absolute;
	-webkit-transition: width 0.2s, height 0.2s, left 0.2s, margin-top 0.2s;
	transition: width 0.2s, height 0.2s, left 0.2s, margin-top 0.2s;
	width: 1.3em;
}

.provisional.gc-subway dl dt a.active,
.provisional.gc-subway ul dt a.active {
	color: #333333;
	text-decoration: none;
}

.provisional.gc-subway dl dt a.active::before,
.provisional.gc-subway ul dt a.active::before {
	background-color: #26374a;
}

.provisional.gc-subway dl dt a.active:focus,
.provisional.gc-subway dl dt a.active:hover,
.provisional.gc-subway ul dt a.active:focus,
.provisional.gc-subway ul dt a.active:hover {
	color: #0535d2;
	text-decoration: underline;
}

.provisional.gc-subway dl dt a:not(.active):focus::before,
.provisional.gc-subway dl dt a:not(.active):hover::before,
.provisional.gc-subway ul dt a:not(.active):focus::before,
.provisional.gc-subway ul dt a:not(.active):hover::before {
	height: 1.5em;
	left: -0.1em;
	margin-top: -0.1em;
	width: 1.5em;
}

.provisional.gc-subway dl dt:last-of-type,
.provisional.gc-subway ul dt:last-of-type {
	border-left: 5px solid transparent;
	padding-bottom: 0;
}

.provisional.gc-subway dl dd,
.provisional.gc-subway ul dd {
	border-left: 4px solid #26374a;
	line-height: inherit !important;
	margin-bottom: 0;
	margin-top: -3px;
	padding: 0 20px 20px 1em;
}

.provisional.gc-subway dl dd:last-child,
.provisional.gc-subway ul dd:last-child {
	border-left: 5px solid transparent;
	padding-bottom: 0;
}

.provisional.gc-subway dl li,
.provisional.gc-subway ul li {
	border-left: 4px solid #26374a;
	padding: 0 20px 30px 1em;
}

.provisional.gc-subway dl li a::before,
.provisional.gc-subway ul li a::before {
	background-color: #fff;
	border: 3px solid #26374a;
	border-radius: 50%;
	content: "";
	height: 1.2em;
	left: 0.05em;
	position: absolute;
	-webkit-transition: width 0.2s, height 0.2s, left 0.2s, margin-top 0.2s;
	transition: width 0.2s, height 0.2s, left 0.2s, margin-top 0.2s;
	width: 1.2em;
}

.provisional.gc-subway dl li a.active,
.provisional.gc-subway ul li a.active {
	color: #333333;
	text-decoration: none;
}

.provisional.gc-subway dl li a.active::before,
.provisional.gc-subway ul li a.active::before {
	background-color: #26374a;
}

.provisional.gc-subway dl li a.active:focus,
.provisional.gc-subway dl li a.active:hover,
.provisional.gc-subway ul li a.active:focus,
.provisional.gc-subway ul li a.active:hover {
	color: #0535d2;
	text-decoration: underline;
}

.provisional.gc-subway dl li a:not(.active):focus::before,
.provisional.gc-subway dl li a:not(.active):hover::before,
.provisional.gc-subway ul li a:not(.active):focus::before,
.provisional.gc-subway ul li a:not(.active):hover::before {
	height: 1.5em;
	left: -0.1em;
	margin-top: -0.1em;
	width: 1.5em;
}

.provisional.gc-subway dl li::first-line,
.provisional.gc-subway ul li::first-line {
	line-height: 1 !important;
}

.provisional.gc-subway dl li:last-child,
.provisional.gc-subway ul li:last-child {
	border-bottom: 4px solid #26374a;
	border-bottom-left-radius: 6px;
	border-left: 4px solid #26374a;
}

.provisional.gc-subway dl li ul,
.provisional.gc-subway ul li ul {
	margin-top: 20px;
	padding-left: 0.55em;
}

.provisional.gc-subway dl li ul li:last-child,
.provisional.gc-subway ul li ul li:last-child {
	border-bottom-width: 0;
	padding-bottom: 0;
}

.provisional.gc-subway h1 {
	float: left;
}

.provisional.gc-subway h1,
.provisional.gc-subway-section .gc-subway-h1 {
	background-color: #fff;
	border-bottom-width: 0;
	color: #555;
	font-size: 1.3em;
	margin-right: 20px;
	margin-top: -19px;
	padding: 0 20px 10px 0;
}

h1~.provisional.gc-subway {
	border-right: none;
	border-top: none;
}

2. Page d'étape

Quand utiliser cette variante : Utilisez sur chaque page liée par la navigation de style métro.

Code
HTML
<nav class="provisional gc-subway">
	<h1 id="gc-document-nav">[Nom du service]</h1>
	<ul>
		<li><a href="#" class="active" aria-current="page">[Page 1]</a></li>
		<li>
			<a href="#" class="hidden-xs hidden-sm">[Page 2]</a>
			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 2]</a>
		</li>
		<li>
			<a href="#" class="hidden-xs hidden-sm">[Page 3]</a>
			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 3]</a>
		</li>
		<li>
			<a href="#" class="hidden-xs hidden-sm">[Page 4]</a>
			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 4]</a>
		</li>
		<li>
			<a href="#" class="hidden-xs hidden-sm">[Page 5]</a>
			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 5]</a>
		</li>
		<li>
			<a href="#" class="hidden-xs hidden-sm">[Page 6]</a>
			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 6]</a>
		</li>
	</ul>
</nav>

<h1 property="name" id="wb-cont" class="gc-thickline">[Page 1]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.</p>
<p>Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis. Aliquam erat volutpat. Ut maximus euismod auctor. Ut ac gravida nunc. Nam non efficitur neque. Pellentesque tincidunt, libero luctus condimentum laoreet, turpis magna maximus nibh, at cursus lectus tellus in augue. Aenean scelerisque eros dui, at tincidunt eros tristique nec.</p>

<nav class="mrgn-bttm-lg mrgn-tp-lg">
	<h3 class="wb-inv">Navigation du document</h3>
	<ul class="pager">
		<li class="next"><a href="page2-fr.html#wb-cont" rel="next"><span class="wb-inv">Suivant: </span>[Page 2]</a></li>
	</ul>
</nav>
CSS
.provisional.gc-subway {
	border-radius: 0px 6px 6px 0px;
	border-right: 4px solid #26374a;
	border-top: 4px solid #26374a;
	margin-top: 38px;
}
.provisional.gc-subway ul {
	clear: both;
	list-style: none;
	padding-left: .57em;
	padding-top: 10px;
	position: relative;
}
.provisional.gc-subway ul li {
	border-left: 4px solid #26374a;
	padding: 0px 20px 30px 1em;
}
.provisional.gc-subway ul li::first-line {
	line-height: 1 !important;
}
.provisional.gc-subway ul li :first-child::before {
	background-color: #fff;
	border: 3px solid #26374a;
	border-radius: 50%;
	content: "";
	height: 1.2em;
	left: .05em;
	position: absolute;
	-webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
	transition: width .2s, height .2s, left .2s, margin-top .2s;
	width: 1.2em;
}
.provisional.gc-subway ul li.active > :first-child::before {
	background-color: #26374a;
}
.provisional.gc-subway ul li a[href]:hover::before,
.provisional.gc-subway ul li a[href]:focus::before {
	height: 1.4em;
	left: -.05em;
	margin-top: -.1em;
	width: 1.4em;
}
.provisional.gc-subway ul li:last-child {
	border-bottom: 4px solid #26374a;
	border-bottom-left-radius: 6px;
	border-left: 4px solid #26374a;
}
.provisional.gc-subway ul li ul {
	margin-top: 20px;
	padding-left: .55em;
}
.provisional.gc-subway ul li ul li:last-child {
	border-bottom-width: 0px;
	padding-bottom: 0px;
}
.provisional.gc-subway ul li ul.noline li {
	-o-border-image: none;
	border-image: none;
	border-left: 4px solid transparent;
}
.provisional.gc-subway h1 {
	float: left;
}
.provisional.gc-subway h1,
.provisional.gc-subway-section .gc-subway-h1 {
	background-color: #fff;
	border-bottom-width: 0px;
	color: #555;
	font-size: 1.3em;
	margin-right: 20px;
	margin-top: -19px;
	padding: 0px 20px 10px 0px;
}
@media screen and (min-width: 992px) {
	.provisional.gc-subway {
		border-right: 0;
		border-top: 0;
		display: none;
		margin-top: 25px;
		padding-left: 15px;
	}
	.provisional.gc-subway.no-blink {
		display: block;
	}
	.provisional.gc-subway .gc-subway-menu-nav {
		float: right;
		width: 33.33%;
	}
	.provisional.gc-subway ul li:last-child {
		border-bottom: 0;
		border-left: 4px solid transparent;
	}
	.provisional.gc-subway-section {
		padding-right: 15px;
		width: 66.66%;
	}
	.provisional.gc-subway-section .gc-subway-h1,
	.provisional.gc-subway-section h1 {
		margin-top: 0;
	}
	.provisional.gc-subway-section .gc-subway-h1 {
		font-family: Lato, sans-serif;
		font-weight: inherit;
		margin-bottom: 0;
		margin-right: 0;
		padding-bottom: 0 !important;
		padding-left: 0;
	}
	.wb-disable .provisional.gc-subway {
		display: block;
	}
}
JS
( function( $, window, wb ) {
"use strict";

var $document = wb.doc,
	componentName = "gc-subway",
	selector = ".provisional." + componentName,
	initEvent = "wb-init ." + componentName,
	views = {
		xxs: "xxsmallview",
		xs: "xsmallview",
		sm: "smallview",
		md: "mediumview",
		lg: "largeview",
		xl: "xlargeview"
	},
	mainClass = "gc-subway-section",
	toggleClass = "wb-inv",
	desktopInited = false,
	skipLink = false,
	$html = wb.html,
	$h1, $h2, $h1Copy, $menu, $main,

	/**
	 * @method init
	 * @param {jQuery Event} event Event that triggered the function call
	 */
	init = function( event ) {

		// Start initialization
		// returns DOM object = proceed with init
		// returns undefined = do not proceed with init (e.g., already initialized)
		var elm = wb.init( event, componentName, selector ),
			h1,
			$elm;

		if ( elm ) {
			$elm = $( elm );
			$h1 = $( "h1", $elm );
			h1 = $h1.get( 0 );

			// Ensure the element have an ID
			if ( !h1.id ) {
				h1.id = wb.getId();
			}

			// Add subway H1 to skip links
			if ( !skipLink ) {
				skipLink = wb.addSkipLink( wb.i18n( "skip-prefix" ) + " " + h1.textContent, { href: "#" + h1.id } );
			}

			// trigger resizing
			onResize( $elm );

			// Identify that initialization has completed
			wb.ready( $elm, componentName );
		}
	},

	/**
	 * Mutate DOM depending on breakpoint
	 * @method onResize
	 * @param {jQuery DOM element | jQuery Event} $elm Element targetted by this plugin, which is the nav | Resizing event
	 */
	onResize = function( $elm ) {

		if ( !$elm.length ) {
			$elm = $( selector );
		}

		// Ensure the page contains at least two heading level 1
		if ( $( "main h1" ).length < 2 ) {
			$document.off( wb.resizeEvents, onResize );
			$elm.addClass( "no-blink p-0" );
			return;
		}

		// Desktop view, setup and mutate H1s
		if ( $html.hasClass( views.md ) || $html.hasClass( views.lg ) ||
			$html.hasClass( views.xl ) ) {

			// Initiate desktop mode only once
			if ( !desktopInited ) {
				initDesktop( $elm );
			}
			$h1.addClass( toggleClass );
			$h1Copy.prependTo( $main );
			$h2.prependTo( $menu );
		} else if ( ( $html.hasClass( views.sm ) || $html.hasClass( views.xs ) || $html.hasClass( views.xxs ) ) && desktopInited ) {

			// Mobile view, mutate back to mobile first if needed
			$h1.removeClass( toggleClass );
			$h1Copy.remove();
			$( "h2:first-child", $menu ).remove();
		}
	},

	/**
	 * Initate setup for desktop mode
	 * @method initDesktop
	 * @param {jQuery DOM element} $elm Element targetted by this plugin, which is the nav
	 */
	initDesktop = function( $elm ) {
		$h2 = $( "" );
		$h1Copy = $( "" );
		$( "ul", $elm ).first().wrap( "
" ); $menu = $( ".gc-subway-menu-nav", $elm ); $elm.nextUntil( ".pagedetails, .gc-subway-section-end" ).wrapAll( "
" ); $main = $elm.next(); // Prevent on-load blinking on desktop $elm.addClass( "no-blink" ); desktopInited = true; }; // Listen for resizing and mutate the DOM accordingly $document.on( wb.resizeEvents, onResize ); // Bind the init event of the plugin $document.on( "timerpoke.wb " + initEvent, selector + ".provisional", init ); // Add the timer poke to initialize the plugin wb.add( selector ); } )( jQuery, window, wb );

Recherche et blogue

Cette configuration a été développée avec l'ARC dans le cadre d'un projet d'optimisation de la Prestation canadienne pour enfants. Elle fonctionne bien sur les appareils mobiles et elle est un façon efficace de montrer la relation entre des pages liées.

Derniers changements

Remplacement du mot « sections » par « pages » dans l'introduction.
Lancé la navigation de style métro en bêta

Discussion

Discuter de cette configuration dans GitHub

Avez-vous trouvé ce que vous cherchiez?

Qu’est-ce qui n’allait pas?

Vous ne recevrez aucune réponse. Les numéros de téléphone et les adresses électroniques seront supprimés.
Maximum de 300 caractères

Merci de vos commentaires

Date de modification :