The first step to open the menu works. But when i want to close it again it won't remove the inline style. Tried different ways to get the result but nothing of it will work.
CSS has just some text-properties for the alignment. ANd the class can-transform has following media query
That's all I can give as an information. Hope it is enough
// Responsive Header
(function(window, document) {
let menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.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')) {
menu.classList.add('closing');
document.getElementById('tutu').removeProperty('display');
document.getElementById('tututu').removeProperty('display');
console.log('ZOINK')
rollBack = setTimeout(toggleHorizontal, 500);
} else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
document.getElementById('tutu').style.display = 'block';
document.getElementById('tututu').style.display = 'block';
};
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);.can-transform {
display: none;
}<div class="pure-g main-menu" id="menu">
<div class="pure-u-1 pure-u-sm-1 pure-u-md-1-4 pure-u-lg-1-4">
<div class="pure-menu-heading">
<a href="/" class="pure-menu-heading">
<img class="hdr-logo" src="/layout/local/public/img/new_logo.gif">
</a>
<a href="#" class="hamburger" id="toggle"><s class="bar"></s><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-3 pure-u-lg-1-4">
<div class="pure-menu-horizontal can-transform" id="tutu">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="/project/upload" class="pure-menu-link">Projekt erstellen</a></li>
<li class="pure-menu-item"><a href="/projects" class="pure-menu-link">Ihre Projekte</a></li>
<li class="pure-menu-item"><a href="/help" class="pure-menu-link">Technische Hilfe</a></li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-3 pure-u-lg-1-3 main-menu-right">
<div class="pure-menu-horizontal can-transform" id="tututu">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<select id="language-select" onchange="setLanguage()">
<option value="en">🇺🇸 English</option>
<option value="de" selected="">🇩🇪 Deutsch</option>
</select>
</li>
<li title="Kundenbereich" class="pure-menu-item">
<a href="/account" class="pure-menu-link">
<svg class="svg-inline--fa fa-user fa-w-14" aria-hidden="true" focusable="false" data-prefix="far" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path></svg>
<!-- <i class="far fa-user"></i> Font Awesome fontawesome.com -->
</a>
</li>
<li class="pure-menu-item">
<a title="Logout" href="/logout" class="pure-menu-link">
<svg class="svg-inline--fa fa-sign-out-alt fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-out-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"></path></svg>
<!-- <i class="fas fa-sign-out-alt"></i> Font Awesome fontawesome.com -->
</a>
</li>
</ul>
</div>
</div>
</div>I figured it out.. I just had to put it into the right function.
// Responsive Header
(function (window, document) {
let menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.can-transform'),
function (el) {
el.classList.toggle('pure-menu-horizontal');
document.getElementById('tututu').style.display = '';
document.getElementById('tutu').style.display = 'none';
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
console.log('ZOINK')
rollBack = setTimeout(toggleHorizontal, 500);
} else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
document.getElementById('tutu').style.display = 'block';
document.getElementById('tututu').style.display = 'block';
};