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

Question

I tried the other solutions on stackoverflow but they did not work. The navbar or the banner code is so complex and I can not implement the other solutions. I want to delete this navbar from all the files (mobile and desktop version) and addd it to a separate HTML file so I can reach from other websites files. The idea I want to do is, I don't want to change the menu items from every file. Just want to do once.

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

You could achieve this using an . Just host the navbar as a unique site and than reference it like this:

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

Answer 2

1. Place this file on a server
2. Fetch file contents through ajax
3. Replace this content with Javacript/Jquery.