如何将菜单标记移出 header 并将其插入 HTML 中的另一个位置？

Question

所以，我在 header 的移动设备上有一个汉堡包菜单。在桌面上，事情发生了变化，菜单位于左侧，主要内容的左侧，header 下方。是否有一种 (JavaScript) 方法来使用现有标记，即将导航标签及其内容移到 #overlay 之外并将其放在 aside 标签中？还是复制菜单标记是唯一的方法？

<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>

Answer 1

代码的工作原理

主体中添加了一个函数，用于监听调整屏幕宽度的大小 onresize="navigationFunc()"。

添加重新加载页面时显示在正确的位置onload="navigationFunc()"。

当宽度小于 1000px 时（您可以在代码中更改）。在 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>

Answer 2

您可以通过选择父元素然后获取其 child/children 来完成此操作。下一步是将子元素附加到另一个父元素，然后从当前父元素中删除子元素

<div id="overlay"> 是父元素，<nav> 是子元素
您可以声明另一个父元素，即 <div id="app">。
然后你把 <nav> 元素连同它的内容
然后将其附加到父元素 - #app 通过使用 appendChild()
并使用 removeChild()

从当前父元素中移除子元素 - #overlay

请参阅下面的代码段

<!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>

您可以打开 chrome 开发工具并转到“元素”选项卡。您会看到 nav 现在包含在 #app 中，但在您的代码中，nav 包含在 overlay

中

如何将菜单标记移出 header 并将其插入 HTML 中的另一个位置？

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

html

javascript

css

markup