如何在单独的 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

您可以使用 . 只需将导航栏托管为一个独特的站点，然后像这样引用它：

 <iframe src="http://host:port/navbar"></iframe>