CODEWITHSUNDEEP
javascripthtmlcssmarkup
Ante
Ante

Reputation: 111

How to move a menu markup out of the header and insert it at another place in HTML?

So, I have a hamburger menu on mobile inside of a header. On desktop things change and the menu is located on the left side, left of the main content, below the header. Is there a (JavaScript) way to use existing markup, i.e. move the nav tag with its contents outside of #overlay and put it in the aside tag? Or is duplicating the menu markup 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>

enter image description here

Upvotes: 1

Views: 170

Answers (2)

54ka
54ka

Reputation: 3589

How the code works

A function has been added to the body that listens for resizing the width of the screen onresize="navigationFunc()".

To be displayed in the right place when we reload the page is added onload="navigationFunc()".

When the width becomes less than 1000px (you can change this in the code). Moves 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>

Upvotes: 1

BillJustin
BillJustin

Reputation: 274

you can do this by selecting the parent element and then get its child/children. the next step would be by appending the child element to another would be parent element and removing the child from the current parent element

<div id="overlay"> is the parent element and <nav> is its child
you can declare another parent element ie <div id="app">.
then you take the <nav> element along with its contents
then append it to would be parent element - #app by using appendChild()
and remove the child from the current parent element - #overlay by using removeChild()

see snippet below

<!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>
    <div id="app"></div>
    <div id="overlay">
        <nav>
            <ul>
                <li>hello</li>
                <li>yo</li>
            </ul>
        </nav>
    </div>


    <script>
        const app = document.querySelector('#app')
        const overlay = document.querySelector('#overlay')  
        const el = overlay.firstElementChild    // gets the elements inside the element with an id of overlay

        app.appendChild(el)
        overlay.removeChild()

    </script>
</body>
</html>

you can open up your chrome dev tools and go to the "Elements" tab. you will see that the nav is now wrapped inside #app but in your code, the nav is wrapped inside overlay

Upvotes: 1

Related Questions