如何在單獨的 HTML 站點上重用此響應式導航欄

Question

我在 stackoverflow 上嘗試了其他解決方案，但沒有奏效。 導航欄或橫幅代碼非常復雜，我無法實現其他解決方案。 我想從所有文件（移動版和桌面版）中刪除這個導航欄，並將其添加到一個單獨的 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>

                <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>
                    </ul>
                    <span class="arrow-main-menu-m">
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                    </span>
                </li>

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

                <li>
                    <a href="info.html">XXX</a>
                </li>
            </ul>
        </div>

        <!--  -->
        <div class="wrap-logo container">
            <!-- Logo desktop -->       
            <div class="logo">
                <a href="index.html"><img src="images/icons/logo-01.png" alt="LOGO"></a>
            </div>  

            <!-- Banner -->
            <div class="banner-header">
                <a href="#"><img src="images/banner-01.jpg" alt="IMG"></a>
            </div>
        </div>  

        <!-- Navbar STARTS HERE -->
        <!--  -->
        <div class="wrap-main-nav">
            <div class="main-nav">
                <!-- Menu desktop -->
                <nav class="menu-desktop">
                    <a class="logo-stick" href="index.html">
                        <img src="images/icons/logo-01.png" alt="LOGO">
                    </a>
                    <ul class="main-menu">
                        <li class="main-menu-item">
                            <a href="index.html">XXX</a>    

                        </li>
                        <li class="mega-menu-item">
                            <a href="XXX.html">XXX</a>
                        </li>
                        <li class="mega-menu-item">
                            <a href="XXX.html">XXX</a>  
                        </li>

                        <li class="main-menu-item">
                            <a href="XXX.html">XXX</a>  
                            <ul class="sub-menu">
                                <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>   
                        </li>   
                        <li class="main-menu-item">
                            <a href="XXX.html">XXX</a>  
                            <ul class="sub-menu">
                                <li><a href="XXX.html">XXX</a></li>
                                <li><a href="XXX.html">XXX</a></li>
                            </ul>   
                        </li>   
                        <li class="mega-menu-item">
                            <a href="XXX.html">XXX</a>
                        </li>

                        <li class="mega-menu-item">
                            <a href="info.html">XXX</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>  
    </div>

Answer 1

您可以使用 . 只需將導航欄托管為一個獨特的站點，然后像這樣引用它：

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

Answer 2

1. 將此文件放在服務器上
2. 通過ajax獲取文件內容
3. 將此內容替換為 Javacript/Jquery。