agecem/agecem-org
4
1
Fork 0
Code Issues 33 Pull requests 2 Activity

Le menu mobile s'affiche et s'enlève

Browse source
This commit is contained in:
Alexel 2023-08-14 17:36:49 -04:00
parent 1e196708fa
commit 842af85788
2 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/css/header.css
View file

@ -83,3 +83,21 @@ text-decoration: none;
}
}
.headerMenuMobile{
font-family: "Poppins";
font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/
color: #000; /*Noir pur*/
list-style: none;
font-style: none;
display: none;
}
.nav-is-active{
background-color: #fff;
display: flex;
flex-flow: column;
justify-content: space-between;
position: fixed;
top: 75px;
}

12
templates/html/header.gohtml
View file

@ -2,13 +2,13 @@
<link rel="stylesheet" href="/public/css/header.css">
<script>
function onToggleNav() {
var menu = document.querySelector(".headerMenu");
var menu = document.querySelector(".headerMenuMobile");
console.log(menu);
menu.classList.toggle('nav-is-active');
}
</script>
<div class="header">
<div class="wrapper headerWrapper">
<div class="wrapper headerWrapper">
<a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
<ul class="headerMenu">
<li class="headerMenuElement"><a href="/">AGECEM</a></li>
@ -16,8 +16,14 @@
<li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
<li class="headerMenuElement"><a href="/admin">admin</a></li>
</ul>
<img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
<img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
</div>
<ul class="headerMenuMobile">
<li class="headerMenuElement"><a href="/">AGECEM</a></li>
<li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
<li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
<li class="headerMenuElement"><a href="/admin">admin</a></li>
</ul>
</div>