How can I move the menu tag out of the header and insert it in another place in the HTML?
abduct
So I have a hamburger menu on mobile in the header. On desktop, things change, with the menu to the left of the main content, below the header. Is there a (JavaScript) way to use the existing markup, i.e. move the nav tag and its content outside of #overlay and put it in a side tag? Or is duplicating the menu marker the only way?
<header>
<div id="overlay">
<nav id="navbar">
<ul class="menu">
<li class="item-group">
<a href="index.html">The Story.</a>
</li>
<li class="item-group">
<a href="everyday-life.html">Everyday Life</a>
</li>
</div>
</header>
<aside> Side menu on desktop </aside>
54ka
How the code works
A function has been added to the body that listens to resize the screen width onresize="navigationFunc()"
.
To display the page in the correct position when we reload the page onload="navigationFunc()"
.
When the width is less than 1000px (can be changed in code) . Move navigation in element with id#mobile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onresize="navigationFunc()" onload="navigationFunc()">
<div id="desktop">
<div id="navigation">
Lorem ipsum dolor sit amet
</div>
</div>
<div id="mobile">
</div>
<script>
var nav = document.getElementById('navigation');
var dsk = document.getElementById('desktop');
var mob = document.getElementById('mobile');
function navigationFunc() {
var w = window.outerWidth;
if (w < 1000) {
// mob.appendChild(nav); // ADD LAST
mob.insertBefore(nav, mob.childNodes[0]); // ADD FIRST
} else {
// dsk.appendChild(nav); // ADD LAST
dsk.insertBefore(nav, dsk.childNodes[0]); // ADD FIRST
}
}
</script>
</body>
</html>