Commit d04e92a3 authored by Augustin Lemesle's avatar Augustin Lemesle
Browse files

remove js from phone menu

parent 88c63975
<header class="siteHeader" id="site_header">
<div id="header_iv_point" class="inviewTop"></div>
<span class="brandLogo"><a href="/index.html" rel="home" title=
"Frama-C"><img src="/assets/img/framac.gif" alt=""><span>Frama-C</span></a></span><a role="button" id=
"menu_toggle" class="menuToggle"><span class="open" onclick="openMenu()"><i></i><i></i><i></i></span><span class="close" onclick="closeMenu()"><i></i><i></i></span></a>
"Frama-C"><img src="/assets/img/framac.gif" alt=""><span>Frama-C</span></a></span>
<input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>
<nav id="menu" role="navigation">
<div class="menu-primary-meny-container">
<ul id="menu-primary-meny" class="menu">
......@@ -21,16 +21,5 @@
<a role="button" href="/html/get-frama-c.html" id="header_download_link" class="btnDownload"><span><i class=
"icon icon-curly-left"></i><i class="icon icon-download-arrow"></i><i class="icon icon-curly-right"></i></span></a>
</nav>
</header>
<script>
function openMenu(){
var x = document.getElementById("site_header");
x.classList.add("menuOpen");
}
function closeMenu(){
var x = document.getElementById("site_header");
x.classList.remove("menuOpen");
}
</script>
\ No newline at end of file
......@@ -560,7 +560,7 @@ div#wpadminbar:hover div#wp-toolbar {
}
}
.siteHeader.menuOpen nav {
display: block;
display: none;
}
@media (min-width: 768px) {
.siteHeader nav {
......@@ -733,68 +733,93 @@ div#wpadminbar:hover div#wp-toolbar {
height: 65px;
}
}
.menuToggle {
.burger {
display: inline-block;
border: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 4px solid #f7931c;
border-radius: 2px;
width: 28px;
transition: border-bottom 1s ease-in-out;
-webkit-transition: border-bottom 1s ease-in-out;
position: absolute;
right: 15px;
top: 15px;
z-index: 62;
backface-visibility: hidden;
}
.menuToggle span {
display: block;
margin: 8px 0 8px 8px;
position: relative;
width: 26px;
height: 22px;
}
.menuToggle span i {
background: #f7931c;
border-radius: 8px;
display: block;
height: 4px;
width: 26px;
transition: all 0.4s;
transform: scaleY(0.8);
position: absolute;
right: 0;
}
.menuToggle span i:first-child {
top: 0;
}
.menuToggle span i:first-child + i {
top: 8px;
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.menuToggle span i:first-child + i + i {
top: 16px;
.burger:before {
content: "";
display: block;
border-bottom: 4px solid #f7931c;
border-radius: 8px;
width: 100%;
margin-bottom: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.menuToggle span.close i {
background: #fff;
width: 26px;
height: 3px;
.burger:after {
content: "";
display: block;
border-bottom: 4px solid #f7931c;
width: 100%;
margin-bottom: 5px;
border-radius: 8px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.menuToggle .close {
.burger-check {
display: none;
}
.menuOpen .menuToggle .open {
display: none;
.burger-check:checked ~ .burger {
border-bottom: 4px solid transparent;
border-radius: 0px;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger-check:checked ~ .burger:before {
border-radius: 0px;
border-bottom: 4px solid white;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:after {
border-radius: 0px;
border-bottom: 4px solid white;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.menuOpen .menuToggle .close {
.burger-check:checked ~ #menu {
display: block;
}
.menuOpen .menuToggle span i {
transform: rotate(45deg);
}
.menuOpen .menuToggle span i:first-child {
top: 8px;
width: 26px;
}
.menuOpen .menuToggle span i:first-child + i {
transform: rotate(-45deg);
top: 8px;
width: 26px;
}
@media (min-width: 768px) {
.menuToggle {
.burger {
display: none;
}
}
......
Supports Markdown
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