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 ...@@ -321,7 +321,13 @@ Media Queries
height: 45px; 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 */ /* hamburger menu - taken on https://actudiant.fr/ - from an old version of https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css */
#toggle{ #toggle{
position: absolute; position: absolute;
left: -9999px; left: -9999px;
...@@ -340,34 +346,49 @@ Media Queries ...@@ -340,34 +346,49 @@ Media Queries
background-size: 50px 50px; background-size: 50px 50px;
} }
#listMenu{ #listMenu{
width: 100%; width: 100%;
margin: auto; margin: auto;
background-color: #f0f0f0; background-color: #f0f0f0;
border-bottom: 5px solid #ccc;
position: fixed; position: fixed;
top: 0; top: 0;
max-height: 0; transition: border-bottom 0.3s;
overflow: hidden;
opacity: 0;
transition: max-height 0.30s ease, opacity 0.30s;
} }
#listMenu li{ #listMenu li{
margin: 3px auto; margin: 0 auto;
max-height: 0;
transition: max-height 0.45s;
} }
#listMenu a{ #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{ #listMenu .selected{
border: none; border: none;
background-color: #ccc; max-height: 300px;
padding: 0;
opacity: 0.5;
} }
#toggle:checked ~ #listMenu{ #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; max-height: 300px;
opacity: 1; 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{ #toggle:checked ~ .nav-label{
...@@ -377,6 +398,9 @@ Media Queries ...@@ -377,6 +398,9 @@ Media Queries
background-size: 50px 50px; background-size: 50px 50px;
} }
#toggle:checked ~ #listMenu .selected{
background-color: #ccc;
}
} }
/* /*
......
...@@ -67,6 +67,9 @@ function writeMenu($pageName){ ...@@ -67,6 +67,9 @@ function writeMenu($pageName){
<?php } <?php }
else if(isset($_SESSION['user'])){ ?> else if(isset($_SESSION['user'])){ ?>
<li><h2><a href="/patate" >🔧</a></h2></li> <li><h2><a href="/patate" >🔧</a></h2></li>
<?php }
if($pageName == 'Changelog'){ ?>
<li><h2><a href="/changelog" class="selected">Changelog</a></h2></li>
<?php } ?> <?php } ?>
<li><h2><a href="/" title="Blog" <?php if($pageName == 'Blog'){ ?>class="selected"<?php } ?>>Blog</a></h2></li> <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> <li><h2><a href="/about" title="À propos" <?php if($pageName == 'À Propos'){ ?>class="selected"<?php } ?>>À propos</a></h2></li>
......
<article> <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> <ul>
<li>Ajout du menu hamburger pour les smartphones</li> <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> <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