Librezo/website
Librezo/website
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add responsive menu #1

Merged
tuxmain merged 3 commits from responsive-menu into main 2023-05-27 12:15:47 +00:00
Conversation 0 Commits 3 Files changed 2 +19 -10
2 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 67921ddfaa - Show all commits

9
sass/css/header.scss
View file

@ -43,13 +43,13 @@ header {
} }
} }
@media (min-width: 1024px) { @media (min-width: 768px) {
.phone-only { .phone-only {
display: none; display: none;
} }
} }
@media (max-width: 1023px) { @media (max-width: 767px) {
.menu-phone { .menu-phone {
position: absolute; position: absolute;
top: 0; top: 0;
@ -81,4 +81,9 @@ header {
} }
summary {
list-style: none;
}

20
templates/base.html
View file

@ -28,7 +28,17 @@
<h1 class="sr-only">Librezo</h1> <h1 class="sr-only">Librezo</h1>
</a> </a>
<nav id="header-menu"> <nav id="header-menu">
<ul id="menu" class="hidden-phone menu-phone "> <ul class="hidden-phone">
<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><details class="phone-only hamburger-menu" >
<summary>&#9776;</summary>
<ul id="menu" class=" menu-phone ">
<li> <li>
<picture class="phone-only"> <picture class="phone-only">
<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/> <source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
@ -42,14 +52,8 @@
<li><a href="/charte">Charte</a></li> <li><a href="/charte">Charte</a></li>
<li><a href="/contact">Contact</a></li> <li><a href="/contact">Contact</a></li>
</ul> </ul>
<li><button class="phone-only hamburger-menu" onclick="toggleMenu()">&#9776;</button></li> </details></li>
</nav> </nav>
<script>
var menu = document.getElementById('menu');
function toggleMenu() {
menu.classList.toggle('hidden-phone');
}
</script>
</header> </header>
{% block body %}{% endblock body %} {% block body %}{% endblock body %}
<footer> <footer>