Commit d34baa20 authored by Georg Krause's avatar Georg Krause

Add responsive menu

parent ad75b881
Pipeline #283 passed with stage
in 38 seconds
......@@ -149,4 +149,80 @@ li.translations {
.pure-u-md-3-5 img {
max-width: 100%;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #f90;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 27px;
right: 20px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-toggle {
display: block;
}
.pure-menu-item {
display: block !important;
width: 100%;
}
.pure-menu-list {
width: 100%;
}
}
.custom-wrapper {
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 3.7em;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: auto;
}
\ No newline at end of file
......@@ -33,23 +33,28 @@
<body>
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<a class="pure-menu-heading" href="/">{{ SITENAME }}</a>
<ul class="pure-menu-list">
{% if pages and pages|length > 0 %}
{% for p in pages %}
{% if p.url %}
<li class="pure-menu-item"><a href="/{{ p.url }}" class="pure-menu-link">{{ p.title }}</a></li>
{% endif %}
{% endfor %}
{% endif %}
{% if LINKS|length > 0 %}
{% for title, link in LINKS %}
<li class="pure-menu-item"><a href="{{ link }}" class="pure-menu-link">{{ title }}</a></li>
{% endfor %}
{% endif %}
</ul>
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed pure-g custom-wrapper" id="menu">
<div class="pure-u-1 pure-u-md-1-6">
<a class="pure-menu-heading" href="/">{{ SITENAME }}</a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
<div class="pure-u-1 pure-u-md-5-6">
<ul class="pure-menu-list">
{% if pages and pages|length > 0 %}
{% for p in pages %}
{% if p.url %}
<li class="pure-menu-item"><a href="/{{ p.url }}" class="pure-menu-link">{{ p.title }}</a></li>
{% endif %}
{% endfor %}
{% endif %}
{% if LINKS|length > 0 %}
{% for title, link in LINKS %}
<li class="pure-menu-item"><a href="{{ link }}" class="pure-menu-link">{{ title }}</a></li>
{% endfor %}
{% endif %}
</ul>
</div>
</div>
</div>
......@@ -59,6 +64,49 @@
{{ FOOTER }}
</div>
<script>
(function (window, document) {
var menu = document.getElementById('menu'),
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function (el) {
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
setTimeout(toggleHorizontal, 500);
}
else {
toggleHorizontal();
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
</script>
</body>
</html>
\ No newline at end of file
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