Menu déroulant

Vue d'ensemble

Les menus déroulants permettent de faire apparaitre une liste de liens ou autres contenus au survol ou au click de souris. Pour l'affichage par click, l'utilisation d'un script Javascript est nécessaire.

Les menus, peuvent être une suite de liens ou tout autre contenu personnalisé. Pour ce faire Sass Swing met à disposition deux classes. Une pour définir les items .dropdown__item, qui est de type Flex et aligné verticalement au centre.

La deuxième classe est pour la balise englobant le contenu du sous-menu .dropdown__menu. Celle-ci est de type Flex en mode colonne.

picsum   item 1 picsum   item 2 picsum   item 3 
<div class="dropdown">
	<button class="btn--secondary">Dropdown générique au survole</button>
	<ul style="--gap:.5em;">
		<li><a href="#">Action 1</a></li>
		<li><a href="#">Action 2</a></li>
		<li class="dropdown">
			<a href="#">Action 3</a>
			<ul style="--gap:.5em;">
				<li><a href="#">Action 3a</a></li>
				<li><a href="#">Action 3b</a></li>
				<li><a href="#">Action 3c</a></li>
				<li><a href="#">Action 3d</a></li>
			</ul>
		</li>
		<li><a href="#">Action 4</a></li>
	</ul>
</div>
<div class="dropdown">
	<button class="btn--secondary">Dropdown avec contenu personnalisé</button>
	<div class="dropdown__menu" style="--gap:.5em;">
		<a href="#" class="dropdown__item">
			<img src="https://picsum.photos/24/24/" alt="picsum" width="24" height="24" style="--mw:24px;"/>
			&nbsp; item 1
		</a>
		<a href="#" class="dropdown__item">
			<img src="https://picsum.photos/24/24/" alt="picsum" width="24" height="24" style="--mw:24px;"/>
			&nbsp; item 2
		</a>
		<a href="#" class="dropdown__item">
			<img src="https://picsum.photos/24/24/" alt="picsum" width="24" height="24" style="--mw:24px;"/>
			&nbsp; item 3
		</a>
	</div>
</div>

Accessibilité

Tout comme la gestion du click. Pour une prise en charge totale des attributs d'accessibilité, l'utilisation d'un script est nécessaire. 

<div class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": false, "hideOnClickOutside": true}'>
	<button class="btn--secondary">Dropdown au click</button>
	<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
		<li><a href="#">Action 1</a></li>
		<li><a href="#">Action 2</a></li>
		<li class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": true}'>
			<a href="#">Action 3</a>
			<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
				<li><a href="#">Action 3a</a></li>
				<li><a href="#">Action 3b</a></li>
				<li><a href="#">Action 3c</a></li>
				<li><a href="#">Action 3d</a></li>
			</ul>
		</li>
		<li><a href="#">Action 4</a></li>
	</ul>
</div>
<div class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": true, "hideOnClickOutside": false}'>
	<button class="btn--secondary">Dropdown au survol accessible</button>
	<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
		<li><a href="#">Action 1</a></li>
		<li><a href="#">Action 2</a></li>
		<li class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": true, "hideOnClickOutside": false}'>
			<a href="#">Action 3</a>
			<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
				<li><a href="#">Action 3a</a></li>
				<li><a href="#">Action 3b</a></li>
				<li><a href="#">Action 3c</a></li>
				<li><a href="#">Action 3d</a></li>
			</ul>
		</li>
		<li><a href="#">Action 4</a></li>
	</ul>
</div>

L'ajout d'un menu déroulant dans une barre de navigation est tout aussi facile, avec ou sans l'utilisation du script.

<div class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": false, "hideOnClickOutside": true}'>
	<button class="btn--secondary">Dropdown au click</button>
	<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
		<li><a href="#">Action 1</a></li>
		<li><a href="#">Action 2</a></li>
		<li class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": true}'>
			<a href="#">Action 3</a>
			<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
				<li><a href="#">Action 3a</a></li>
				<li><a href="#">Action 3b</a></li>
				<li><a href="#">Action 3c</a></li>
				<li><a href="#">Action 3d</a></li>
			</ul>
		</li>
		<li><a href="#">Action 4</a></li>
	</ul>
</div>
<div class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": true, "hideOnClickOutside": false}'>
	<button class="btn--secondary">Dropdown au survol accessible</button>
	<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
		<li><a href="#">Action 1</a></li>
		<li><a href="#">Action 2</a></li>
		<li class="dropdown" aria-haspopup="true" aria-expanded="false" data-js-dropdown='{"showOnHover": true, "hideOnClickOutside": false}'>
			<a href="#">Action 3</a>
			<ul role="listbox" tabindex="-1" aria-hidden="true" style="--gap:.5em;">
				<li><a href="#">Action 3a</a></li>
				<li><a href="#">Action 3b</a></li>
				<li><a href="#">Action 3c</a></li>
				<li><a href="#">Action 3d</a></li>
			</ul>
		</li>
		<li><a href="#">Action 4</a></li>
	</ul>
</div>

Personnalisation

Uniformisation et améliorations prévue