Skip to content
GitLab
Commit fdeaea68 authored by GUINGAND SOLENE's avatar GUINGAND SOLENE
Browse files

nav accessible

parent 5c88bc4c
Hide whitespace changes
Inline Side-by-side
css/index.css 0 → 100644
View file @ fdeaea68
/** These styles just simulate a nav bar. Chances are you don't need these. */
header,
header a {
text-decoration: none;
}
/** These are the styles you want */
.flyout-nav {
margin: 0 auto;
}
.flyout-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.flyout-nav a {
transition: background-color .2s ease-out,
color .2s ease-out;
}
.flyout-nav > ul {
display: flex;
justify-content: center;
}
.flyout-nav > ul > li {
text-align: center;
}
.flyout-nav > ul > li > a {
display: block;
padding: 1.5rem 2rem;
}
.flyout-nav .has-submenu ul {
background: #fff;
display: none;
position: absolute;
text-align: left;
padding: 1rem 0;
}
.flyout-nav .has-submenu li a {
display: block;
color: #900028;
padding: .5rem 2rem;
}
.has-submenu button {
background: transparent;
display: block;
padding: 0;
border: 0;
margin: 0 auto -20px;
height: 20px;
}
.has-submenu button:after {
content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%22M7.406%2015.422l-1.406-1.406%206-6%206%206-1.406%201.406-4.594-4.594z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
display: block;
height: 100%;
width: 20px;
visibility: hidden;
transform: rotate(180deg);
}
.has-submenu:hover button:after,
.has-submenu.open button:after {
transform: rotate(0);
}
.has-submenu a:focus button:after,
.has-submenu button:focus:after,
.has-submenu:hover button:after,
.has-submenu.open button:after {
visibility: visible;
}
.flyout-nav .has-submenu:hover > ul,
.flyout-nav .has-submenu.open > ul {
display: block;
animation: appear .2s ease-out;
}
.flyout-nav .open > a,
.flyout-nav > ul > li:hover > a,
.flyout-nav > ul > li > a:focus,
.flyout-nav > ul > li > a:focus-within {
background: #fff;
color: #900028;
}
.flyout-nav .has-submenu li a:hover,
.flyout-nav .has-submenu li a:focus {
background: #333;
color: #fff;
}
@keyframes appear {
0% { opacity: 0 }
100% { opacity: 1 }
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
index.html
View file @ fdeaea68
......@@ -7,23 +7,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accueil - Frakass</title>
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body class="min-h-screen flex flex-col">
<header class="flex justify-between items-center bg-primary text-white p-5">
<h1 class="text-4xl"><a href="../">Frakass</a></h1>
<nav class="text-xl" aria-labelledby="mainmenulabel">
<p id="mainmenulabel" class="hidden">Navigation principale</p>
<ul class="flex items-center">
<li class="active-link ml-5"><a aria-current="page" href="../">Accueil</a></li>
<li class="active-link ml-5"><a href="pages/video.html">Vidéo</a></li>
<li class="active-link ml-5"><a href="pages/tableau.html">Tableau</a></li>
<li class="active-link ml-5"><a href="pages/contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main class="h-full flex-grow">Coucou</main>
<footer class="text-center bg-primary text-white p-5">Frakass © 2021</footer>
<a class="hidden" title="Aller au contenu" href="#main">Aller au contenu</a>
<a class="hidden" title="Aller au menu" href="#main-menu">Aller au menu</a>
<header class="flex justify-between items-center bg-primary text-white p-5">
<h1 class="text-4xl"><a href="../">Frakass</a></h1>
<nav aria-label="Navigation principale" class="flyout-nav" id="flyoutnav">
<ul role="menubar">
<li>
<a href="../" role="menuitem">Accueil</a>
</li>
<li class="has-submenu">
<a href="#" role="menuitem">Vidéo</a>
<ul role="menu">
<li><a href="#" role="menuitem">Page 1</a></li>
<li><a href="#" role="menuitem">Page 2</a></li>
</ul>
</li>
<li>
<a href="#attend" role="menuitem">Tableau</a>
</li>
<li>
<a href="#attend" role="menuitem">Contact</a>
</li>
</ul>
</nav>
</header>
<main id="main" class="h-full flex-grow">Coucou</main>
<footer class="text-center bg-primary text-white p-5">Frakass © 2021</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
js/index.js 0 → 100644
View file @ fdeaea68
/** Class representing a flyout menu. */
class FlyoutMenu {
/**
* Create a flyout menu
* @param {string} id - The id name of the menu's wrapper
*/
constructor(id) {
this.id = id;
this.menuItems = [];
let menuItems = document.getElementById(id).getElementsByClassName('has-submenu');
Array.prototype.forEach.call(menuItems, (menuItem) => {
this.menuItems.push(new FlyoutMenuItem(menuItem));
});
this.menuItems.forEach((menuItem) => {
['mouseover', 'mouseout'].forEach( (listener) => {
menuItem.el.addEventListener(listener, this.toggle.bind(this, menuItem));
});
menuItem.topLevelLink.addEventListener('focus', this.closeAll.bind(this, menuItem));
menuItem.btn.addEventListener('focus', (event) => {
this.closeAll(menuItem);
event.preventDefault();
}, this);
menuItem.btn.addEventListener("click", (event) => {
this.toggle(menuItem);
event.preventDefault();
}, this);
})
}
/**
* Toggle the current menu item
* @param {string} currentItem - The menu item that is being triggered
*/
toggle(currentItem) {
this.closeAll(currentItem);
if (currentItem.el.classList.contains('open')){
currentItem.close()
} else {
currentItem.open();
}
}
/**
* Closes all other menu items except the current one
* @param {string} currentItem - The menu item that is being triggered
*/
closeAll(currentItem) {
this.menuItems.forEach((menuItem) => {
if (menuItem === currentItem) return;
menuItem.close();
});
}
}
/** Class representing a flyout menu item. */
class FlyoutMenuItem {
constructor(menuItem) {
this.el = menuItem;
this.btn = document.createElement("BUTTON");
this.topLevelLink = this.el.getElementsByTagName('a')[0];
this.btnLabel = document.createElement("SPAN");
this.btnLabel.className = "visuallyhidden";
this.btnLabel.innerText = "Voir le sous-menu";
this.btn.appendChild(this.btnLabel);
this.topLevelLink.appendChild(this.btn);
}
/** Opens a menu item */
open() {
this.el.classList.add("open");
this.topLevelLink.setAttribute('aria-expanded', "true");
this.btnLabel.innerText = 'Cacher le sous-menu';
}
/** Closes a menu item */
close() {
this.el.classList.remove("open");
this.topLevelLink.setAttribute('aria-expanded', "false");
this.btnLabel.innerText = 'Voir le sous-menu';
}
}
let mainMenu = new FlyoutMenu("flyoutnav");
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment