如何在单独的 HTML 网站上重复使用此响应式导航栏

Question

导航栏或横幅代码非常复杂，我无法实现其他解决方案。我想从所有文件（移动版和桌面版）中删除此导航栏，并将其添加到单独的 HTML 文件中，以便我可以从其他网站文件访问。我想做的想法是，我不想更改每个文件中的菜单项。只想做一次。

<!-- Header desktop -->

    <div class="container-menu-desktop">

        </div>

        <!-- Header Mobile -->

        <div class="wrap-header-mobile">

            <!-- Logo mobile -->        

            <div class="logo-mobile">

                <a href="index.html"><img src="images/icons/logo-01.png" alt="IMG-LOGO"></a>

            </div>

            <!-- Button show menu -->

            <div class="btn-show-menu-mobile hamburger hamburger--squeeze m-r--8">

                <span class="hamburger-box">

                    <span class="hamburger-inner"></span>

                </span>

            </div>

        </div>

        <!-- Menu Mobile -->

        <div class="menu-mobile">

            <ul class="main-menu-m">

                <li>

                    <a href="index.html">XXX</a>

                </li>

                <li>

                    <a href="XXX.html">XXX</a>

                </li>

                <li>

                    <a href="XXX.html">XXX</a>

                </li>

                <li>

                    <a href="XXX.html">XXX</a>

                    <ul class="sub-menu-m">

                        <li><a href="XXX.html">XXX</a></li>

                        <li><a href="XXX.html">XXX</a></li>

                        <li><a href="XXX.html">XXX</a></li>

                    </ul>

                    <span class="arrow-main-menu-m">

                        <i class="fa fa-angle-right" aria-hidden="true"></i>

                    </span>

                </li>

Answer 1

您可以使用 .&nbsp;只需将导航栏托管为一个独特的站点，然后像这样引用它：&nbsp;<iframe&nbsp;src="http://host:port/navbar"></iframe>