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

Merge branch 'feature/menu/withoutjs' into 'master'

Feature/menu/withoutjs

See merge request pub.frama-c.com!45
parents 88c63975 4dea621a
<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">
<div>
<ul class="menu">
{% for item in site.data.nav %}
{% if item.id == include.header %}
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item current_page_item">
<li class="menu-item current-menu-item">
{% else %}
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<li class="menu-item">
{% endif %}
<a href="{{ item.link }}">{{ item.name }}</a>
</li>
{% endfor %}
{% if include.header == "download" %}
<li class="menu-item current-menu-item download">
{% else %}
<li class="menu-item download">
{% endif %}
<a href="/html/get-frama-c.html">Download</a>
</li>
</ul>
</div>
<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
......@@ -20,13 +20,13 @@
<a href="/category/{{ category | downcase }}/index.html" class="btn btnCancel active"><span>{{ category }}</span></a>
{% endfor %}
{% if site.categories contains page.title %}
<a href="/category/{{ page.title | downcase }}/index.html" class="btn btnCancel active"><span>{{ page.title }}</span></a>
{% endif %}
{% for category in site.categories %}
{% unless include.cats contains category[0] %}
{% if page.title == category[0] %}
<a href="/category/{{ category[0] | downcase }}/index.html" class="btn btnCancel active"><span>{{ category[0] }}</span></a>
{% else %}
{% unless include.cats contains category[0] or page.title == category[0] %}
<a href="/category/{{ category[0] | downcase }}/index.html" class="btn btnCancel"><span>{{ category[0] }}</span></a>
{% endif %}
{% endunless %}
{% endfor %}
</nav>
......
......@@ -460,7 +460,7 @@ div#wpadminbar:hover div#wp-toolbar {
left: 0;
top: 0;
height: 64px;
z-index: 51;
z-index: 52;
}
@media (min-width: 768px) {
.siteHeader {
......@@ -551,17 +551,6 @@ div#wpadminbar:hover div#wp-toolbar {
height: 4px;
visibility: hidden;
}
@media (max-width: 767px) {
.siteHeader.menuOpen {
height: 100%;
background: transparent;
position: fixed;
z-index: 53;
}
}
.siteHeader.menuOpen nav {
display: block;
}
@media (min-width: 768px) {
.siteHeader nav {
display: block;
......@@ -598,6 +587,10 @@ div#wpadminbar:hover div#wp-toolbar {
border-bottom: #f26521 1px solid;
}
.menu-item.download {
display: none;
}
.siteHeader nav li a:hover {
border-bottom: #f26521 1px solid;
}
......@@ -733,68 +726,92 @@ 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;
}
}
......
......@@ -6,7 +6,7 @@ title: Get Frama-C
<div id="wrapper" class="hfeed">
{% include headers.html %}
{% include headers.html header="download" %}
<div id="container" class="mainContainer">
<div class="getFramaC">
......
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