<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menu Burger</title>
</head>
<body>
<div id="tete">
<div id="titre">
<img src="https://lintermediaire.be/wp-content/themes/lintermediaire/favicon.png" alt="Logo" title="logo" />
<h1>L'interMEDIAire</h1>
</div>
<i class="fa fa-bars" aria-hidden="true"></i>
<i class="fa fa-close" aria-hidden="true"></i>
<ul id="menu" class="">
<li><a href="#">Accueil</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Ce Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="contenu">
<h2>Titre </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vitae animi consequatur ut sunt dicta voluptatibus quis voluptate neque cum aut praesentium, atque velit mollitia eveniet delectus ducimus vero, quidem.</p>
<a href="www.lintermediaire.be" target="_blank">Mon blog</a>
<hr />
<img src="https://fillmurray.com/1280/960" alt="" />
</div>
</body>
</html>
<!-- Design by l'interMEDIAire -->
/*COULEURS*/
$noir: rgba(0,0,0,1);
$noirfonce: rgba(29,31,32,1);
$rose: rgba(152,38,114,1);
$bleu: rgba(128,155,189,1);
$blanc: rgba(255,255,255,1);
$gris: rgba(55,55,55,1);
$gris3: rgba(204,204,204,1);
/*TOUS LES ELEMENTS*/
*,*:after,*:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
min-width: 380px;
background: $noirfonce;
font-size: 1em;
color: $blanc;
overflow-x: hidden;
}
#tete {
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100vw;
height: 75px;
padding: 10px 15px;
background: $noir;
border: 0px solid $gris;
border-bottom-width: 5px;
#titre {
display: flex;
align-items: baseline;
img {
width: auto;
height: 50px;
}
h1 {
margin-left: 10px;
font-size: 1.4em;
}
}
i.fa-bars {
margin-right: 20px;
color: $blanc;
transition: all .7s ease;
}
i.fa-close {
display: none;
margin-right: 20px;
color: $gris3;
}
i.fa:hover,i.fa:active {
cursor: pointer;
opacity: .7;
}
#menu {
display: none;
margin: 0px;
padding: 30px 0px 0px;
list-style: none;
transition: all .7s ease;
animation: droite .7s ease reverse;
@keyframes droite {
0% {left: -100vw;}
100% {left: 0px;}
}
a {
margin: 0px 10px;
color: $gris3;
text-decoration: none;
transition: all .7s ease;
}
a:hover {
color: white;
}
}
#menu.ouvert {
position: absolute;
display: block;
top: 70px;
left: 0px;
animation: droite .7s ease both;
@keyframes droite {
0% {left: -100vw;}
100% {left: 0px;}
}
li {
width: 100vw;
height: 50px;
margin: 0px;
padding: 0px;
line-height: 1.4em;
}
a {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
margin: 0px;
padding: 10px;
}
a:hover,a:active {
background: #000;
}
}
}
i.apparait {
display: block;
}
i.disparait {
display: none;
}
#contenu {
padding: 10px 15px;
background: $noirfonce;
transition: all .7s ease;
h2 {
color: $bleu;
}
p {
font-size: .9em;
line-height: 1.4em;
}
a {
color: $rose;
text-decoration: none;
transition: all .7s ease;
}
a:hover,a:active{
color: $blanc;
}
hr {
display: block;
margin: 30px 0px;
border: 1px solid $gris;
}
img {
display: block;
margin-top: 10px;
width: 100%;
height: auto;
}
}
#contenu.ferme {
transform: scale(0);
}
@media screen and (min-width: 640px) {
body {
background: $gris;
}
#tete #menu {
display: flex;
}
#tete i.fa-bars,#tete i.fa-close,#menu.ouvert {
display: none;
}
#contenu, #tete {
margin: 0px auto;
width: 640px;
}
#contenu {
min-height: calc(100vh - 70px);
}
}
/*Design by l'interMEDIAire*/
View Compiled
$(document).ready(function(){
$('i.fa-bars').click(function(){
$(this).hide();
$("i.fa-close").show();
$('#menu').toggleClass('ouvert');
$('#contenu').toggleClass('ferme');
});
$("i.fa-close").click(function(){
$(this).hide();
$("i.fa-bars").show();
$('#menu').toggleClass('ouvert');
$('#contenu').toggleClass('ferme');
});
});
/*Design by l'interMEDIAire*/
