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 { ...@@ -149,4 +149,80 @@ li.translations {
.pure-u-md-3-5 img { .pure-u-md-3-5 img {
max-width: 100%; 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 @@ ...@@ -33,23 +33,28 @@
<body> <body>
<div class="header"> <div class="header">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed"> <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed pure-g custom-wrapper" id="menu">
<a class="pure-menu-heading" href="/">{{ SITENAME }}</a> <div class="pure-u-1 pure-u-md-1-6">
<a class="pure-menu-heading" href="/">{{ SITENAME }}</a>
<ul class="pure-menu-list"> <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
{% if pages and pages|length > 0 %} </div>
{% for p in pages %}
{% if p.url %} <div class="pure-u-1 pure-u-md-5-6">
<li class="pure-menu-item"><a href="/{{ p.url }}" class="pure-menu-link">{{ p.title }}</a></li> <ul class="pure-menu-list">
{% endif %} {% if pages and pages|length > 0 %}
{% endfor %} {% for p in pages %}
{% endif %} {% if p.url %}
{% if LINKS|length > 0 %} <li class="pure-menu-item"><a href="/{{ p.url }}" class="pure-menu-link">{{ p.title }}</a></li>
{% for title, link in LINKS %} {% endif %}
<li class="pure-menu-item"><a href="{{ link }}" class="pure-menu-link">{{ title }}</a></li> {% endfor %}
{% endfor %} {% endif %}
{% endif %} {% if LINKS|length > 0 %}
</ul> {% 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>
</div> </div>
...@@ -59,6 +64,49 @@ ...@@ -59,6 +64,49 @@
{{ FOOTER }} {{ FOOTER }}
</div> </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> </body>
</html> </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