Commit 49c5a5f4 authored by Corentin Bettiol's avatar Corentin Bettiol 💻

change hamburger menu; it displays the current page

parent ae7f1d25
......@@ -321,7 +321,13 @@ Media Queries
height: 45px;
}
#header{
margin-top: 30px;
}
/* hamburger menu - taken on https://actudiant.fr/ - from an old version of https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css */
#toggle{
position: absolute;
left: -9999px;
......@@ -340,34 +346,49 @@ Media Queries
background-size: 50px 50px;
}
#listMenu{
width: 100%;
margin: auto;
background-color: #f0f0f0;
border-bottom: 5px solid #ccc;
position: fixed;
top: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.30s ease, opacity 0.30s;
transition: border-bottom 0.3s;
}
#listMenu li{
margin: 3px auto;
margin: 0 auto;
max-height: 0;
transition: max-height 0.45s;
}
#listMenu a{
padding: 3px 0;
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0;
transition: max-height 0.3s ease, opacity 0.3s, padding 0.3s;
}
#listMenu .selected{
border: none;
background-color: #ccc;
max-height: 300px;
padding: 0;
opacity: 0.5;
}
#toggle:checked ~ #listMenu{
border-bottom: 5px solid #ccc;
transition: border-bottom 0.3s;
}
#toggle:checked ~ #listMenu li{
max-height: 300px;
transition: max-height 0.45s;
}
#toggle:checked ~ #listMenu a{
padding: 3px 0;
max-height: 300px;
opacity: 1;
transition: max-height 0.45s ease-out, opacity 0.30s;
transition: max-height 0.3s, opacity 0.3s, padding 0.3s;
}
#toggle:checked ~ .nav-label{
......@@ -377,6 +398,9 @@ Media Queries
background-size: 50px 50px;
}
#toggle:checked ~ #listMenu .selected{
background-color: #ccc;
}
}
/*
......
......@@ -67,6 +67,9 @@ function writeMenu($pageName){
<?php }
else if(isset($_SESSION['user'])){ ?>
<li><h2><a href="/patate" >🔧</a></h2></li>
<?php }
if($pageName == 'Changelog'){ ?>
<li><h2><a href="/changelog" class="selected">Changelog</a></h2></li>
<?php } ?>
<li><h2><a href="/" title="Blog" <?php if($pageName == 'Blog'){ ?>class="selected"<?php } ?>>Blog</a></h2></li>
<li><h2><a href="/about" title="À propos" <?php if($pageName == 'À Propos'){ ?>class="selected"<?php } ?>>À propos</a></h2></li>
......
<article>
<h3><a href="">02/03/19</a></h3>
<h3><a href="">03/03/19</a></h3>
<ul>
<li>Màj menu hamburger ; il affiche la page courante maintenant</li>
</ul>
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/6088891e4bf5a032a2746d6d3ad2d326b304704b">02/03/19</a></h3>
<ul>
<li>Ajout du menu hamburger pour les smartphones</li>
<li>Ajout du renommage automatique de l'url d'un post/projet pour toujours avoir des url différentes même si plusieurs posts/projets on le même nom</li>
......
Markdown is supported
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