Menu esterno

**mister.smith** · 31-10-2019, 18:30

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:

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.

**Vincent.Zeno** · 31-10-2019, 19:20

le tue pagine hanno estensione .html?
nel caso... saresti disposto a cambiarla?

si può include anche come file js, ma necessiti comunque di una parte dinamica: altrimenti al client rimane nella cache e non si aggiorna facilmente...

ricorda di inserire il codice postato sempre all'interno del tag CODE

**mister.smith** · 02-11-2019, 08:50

Intanto grazie.

Preferirei una soluzione con un file esterno tipo menu.js, lasciando tutto come html, ma non so come scriverlo esattamente e quale codice inserire nelle pagine html come richiamo.
Mi dai ancora qualche aiutino?

Grazie ancora.

**carlomarangoni** · 02-11-2019, 11:53

Per il codice JS che costruisce il menu è impossibile dartelo perché bisognerebbe sapere con precisione come deve essere il menu.

Il codice che richiama il menu esterno invece è questo da inserire tra <body>....</body> nel punto doce deve apparire il menu:

codice:

<script type="text/javascript" src="menu.js"></script>

**mister.smith** · 02-11-2019, 15:43

Grazie.

Il menù e quello che si legge nel codice postato sopra. Si tratta solo di una riga orizzontale dove scegliere tra la home-page e le altre tre pagine.
Ora le domande sono due:
nel file menu.js trascrivo pari pari il medesimo codice?
ci scrivo anche la formattazione che fa riferimento al file css?

**carlomarangoni** · 02-11-2019, 16:34

Prova a postare il css che vedo un po'

**Vincent.Zeno** · 02-11-2019, 18:43

gli elementi hanno già le loro classi, dovrebbero essere richiamate senza problemi. dovrebbero

**mister.smith** · 03-11-2019, 11:39

Tutto il css è una bella botta. Anche perchè si tratta di un sito responsive e quindi ci sono più formattazioni per ogni dimensione di layout.
Riporto un estratto, una parte del file style.css, che fa riferimento al menu postato sopra:

body {
background:#fff;
font-family: 'Roboto', sans-serif;
text-align: justify;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
ul {
padding: 0;
margin: 0;
}
.header-top {
padding: 0.5em 0;
background:#3C3C3C;
}
.top-nav {
text-align: center;
}
.top-nav ul li {
display:inline-block;
}
.top-nav ul li a {
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: 400;
font-size: 1.1em;
margin:1.2em;
}
.top-nav ul li span {
font-size:1em;
color:#fff;
}
.top-nav ul li a:hover,.top-nav ul li.active a{
color:#158BC4;
}
.top-nav span.menu {
display: none;
}
.item-separator {
border-bottom: 1px
solid #B3B3B3;
margin-bottom: 30px;
padding-bottom:0 ;
}
.elenco-standard ul li {
list-style-type: disc; /*values: circle, disc, square, decimal, upper-alpha*/
padding:0 0;
color: #7a7a7a;
text-decoration: none;
font-size: 1.1em;
margin: 0 0 0 0.8em;
}

**carlomarangoni** · 03-11-2019, 12:05

Allora se il css del menu fa parte del css generale richiamalo normalmente nella pagina.
Il contenuto del menu esterno "menu.js" dovrà essere il seguente:

codice:

<!-- 
document.writeln(" <!-- MENU --> "); 
document.writeln("  "); 
document.writeln("  "); 
document.writeln("     <div class=\"header-top\">  "); 
document.writeln("         <div class=\"container\">     "); 
document.writeln("             <div class=\"top-nav\"> "); 
document.writeln("                 <span class=\"menu\"><img src=\"images/menu.png\" alt=\"\"></span> "); 
document.writeln("  "); 
document.writeln("                     <ul> "); 
document.writeln("                         <li><a href=\"index.html\">Home-page</a><span>|</span></li> "); 
document.writeln("                         <li><a href=\"pagina01.html\">pagina01</a><span>|</span></li> "); 
document.writeln("                         <li><a href=\"pagina02.html\">pagina02</a><span>|</span></li> "); 
document.writeln("                         <li><a href=\"pagina03.html\">pagina03</a><span>|</span></li> "); 
document.writeln("  "); 
document.writeln("  "); 
document.writeln("                     </ul> "); 
document.writeln("  "); 
document.writeln("                     <script> "); 
document.writeln("                     $(\"span.menu\").click(function(){ "); 
document.writeln("                         $(\".top-nav ul\").slideToggle(500, function(){ "); 
document.writeln("                         }); "); 
document.writeln("                     }); "); 
document.writeln("                     </script> "); 
document.writeln("  "); 
document.writeln("  "); 
document.writeln("             </div>                 "); 
document.writeln("         </div> "); 
document.writeln("     </div> ");
 // -->

**mister.smith** · 03-11-2019, 12:29

YESSSSS !
GRAZIEEEEEEEEEEEEE !

Nel richiamo all'interno dei file html, ho solo aggiunto un "js" al percorso:

<script type="text/javascript" src="js/menu.js"></script>

perchè il file menu.js l'ho messo all'interno della cartella specifica js.

Grazie Carlo, anche per la pazienza. Grazie a tutti. Sono strafelice.

Discussione: Menu esterno

Strumenti discussione

Ricerca discussione

Visualizza

Menu esterno

Permessi di invio