Menu esterno

[mister.smith]

Buongiorno a tutti e mi scuso se la domanda è già stata posta o se mi trovo nella sezione sbagliata.

Vorrei poter mettere il codice del menu in un file esterno per poter apportare le modifiche su un file solo anzichè su tutte le pagine html del sito.

All'interno di ogni pagina, è riportato il seguente codice:

<!-- MENU -->


    <div class="header-top"> 
        <div class="container">    
            <div class="top-nav">
                <span class="menu"><img src="images/menu.png" alt=""></span>

                    <ul>
                        <li><a href="index.html">Home-page</a><span>|</span></li>
                        <li><a href="pagina01.html">pagina01</a><span>|</span></li>
                        <li><a href="pagina02.html">pagina02</a><span>|</span></li>
                        <li><a href="pagina03.html">pagina03</a><span>|</span></li>


                    </ul>

                    <script>
                    $("span.menu").click(function(){
                        $(".top-nav ul").slideToggle(500, function(){
                        });
                    });
                    </script>


            </div>                
        </div>
    </div>

Come posso fare per fare in modo che questa parte sia in un file esterno e la possa semplicemente richiamare?
Ho provato con "include", ma sembra non funzionare.
Grazie e portate pazienza, ma devo imparare ancora molte cose.