add responsive menu

This commit is contained in:
oiseauroch
2023-05-26 17:02:04 +02:00
parent df0cde7f95
commit a5ed3add25
2 changed files with 55 additions and 1 deletions

View File

@ -28,14 +28,28 @@
<h1 class="sr-only">Librezo</h1>
</a>
<nav id="header-menu">
<ul>
<ul id="menu" class="hidden-phone menu-phone ">
<li>
<picture class="phone-only">
<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light)"/>
<img decoding="async" src="/img/librezo-little-black.png" alt="Librezo" aria-hidden/>
</picture>
</li>
<li><a href="/fonctionnement">Fonctionnement</a></li>
<li><a href="/tarifs">Services et tarifs</a></li>
<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
<li><a href="/charte">Charte</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<li><button class="phone-only hamburger-menu" onclick="toggleMenu()">&#9776;</button></li>
</nav>
<script>
var menu = document.getElementById('menu');
function toggleMenu() {
menu.classList.toggle('hidden-phone');
}
</script>
</header>
{% block body %}{% endblock body %}
<footer>