agecem/agecem-org
4
1
Fork 0
Code Issues 30 Pull requests 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"> <link rel="stylesheet" href="/public/css/header.css">
<script> <script>
function onToggleNav() { function onToggleNav() {
var menu = document.querySelector(".headerMenu"); var menu = document.querySelector(".headerMenuMobile");
console.log(menu); console.log(menu);
menu.classList.toggle('nav-is-active'); menu.classList.toggle('nav-is-active');
} }
</script> </script>
<div class="header"> <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> <a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
<ul class="headerMenu"> <ul class="headerMenu">
<li class="headerMenuElement"><a href="/">AGECEM</a></li> <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="/documentation">Documentation</a></li>
<li class="headerMenuElement"><a href="/admin">admin</a></li> <li class="headerMenuElement"><a href="/admin">admin</a></li>
</ul> </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> </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> </div>