[Javascript] Caricamento menu da file esterno

mizzium

Nuovo Utente
18 Nov 2018
6
0
1
Salve a tutti,
scusatemi ma sono all'inizio nella programmazione javascript. Non ho trovato nei post precedenti quello che cerco, forse è troppo banale. Ho creato un menu in html e vorrei salvarlo in un file esterno e caricarlo dove mi serve nelle varie pagine che ho del sito che sto sviluppando. Vorrei avere un esempio per poter procedere. Grazie
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.250
324
83
Posta il codice del menu
 

mizzium

Nuovo Utente
18 Nov 2018
6
0
1
HTML:
<nav class="navbar navbar-expand-lg navbar-light fixed-top  py-0 py-md-0" style="border-bottom:solid; border-color:#f39200; background-color:#f39200;margin-left:-10px;">
<a class="navbar-brand" href="index.html"><img src="img/logoSaraswatiUnicoNew.png"></a>
    <!--Versione BIANCA
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top  py-0 py-md-0" style="border-bottom:solid; border-color:#ffa309;margin-left:-10px;">
    <a class="navbar-brand" href="index.html"><img src="img/logoSaraswatiUnico72.png"></a-->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <!--a class="navbar-brand" href="#"><img src="img/Logo SaraswatiUnico.jpg" style=" background-color: #FFC"></a-->
    <ul class="navbar-nav mr-sm-2 mx-auto">
        <li class="nav-item">
        <a class="nav-link" href="index.html" style="color: #639; font-family: Novecentosanswide-Bold, Arial, Helvetica, sans-serif;" >Home</a>
      </li>
     <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="Attivita.html" data-toggle="dropdown" style="color: #639; font-family: Novecentosanswide-Bold, Arial, Helvetica, sans-serif;" > Attivit&agrave; </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="Attivita.html">Attività</a>
        <a class="dropdown-item" href="Hata.html">Hatha</a>
        <a class="dropdown-item" href="YogaInVolo.html">Yoga in Volo</a>
        <a class="dropdown-item" href="Kundalini.html">Kundalini</a>
        <a class="dropdown-item" href="etavanzata.html">Yoga età avanzata</a>
        <a class="dropdown-item" href="Giocayoga.html">GiocaYoga®</a>
        <a class="dropdown-item" href="YogaGravidanza.html">Yoga in Gravidanza</a>
        <a class="dropdown-item" href="YogaPostParto.html">Yoga Post Parto</a>
        <a class="dropdown-item" href="YogaMammaBaby.html">Yoga Mamma & Bambino</a>
        <a class="dropdown-item" href="Meditazione.html">Meditazione Vipassana</a>
        <a class="dropdown-item" href="Counseling.html">Counseling</a>
        <a class="dropdown-item" href="MassaggiAyurvedici.html">Massaggi</a>
        <a class="dropdown-item" href="Individuale.html">Yoga individuale</a>
      </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="Insegnanti.html" data-toggle="dropdown" style="color: #639; font-family: Novecentosanswide-Bold, Arial, Helvetica, sans-serif;" > Insegnanti </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="Insegnanti.html">Insegnanti</a>
        <a class="dropdown-item" href="InsElisaCalistri.html">Elisa Calistri</a>
        <a class="dropdown-item" href="InsAlessioVernati.html">Alessio Vernati</a>
        <a class="dropdown-item" href="InsMira.html">Mira Quaglietta</a>
        <a class="dropdown-item" href="InsMarcoMarrazza.html">Marco Marrazza</a>
        <a class="dropdown-item" href="InsKatiaSalvatori.html">Katia Salvatori</a>
        <a class="dropdown-item" href="InsMicaelaJorio.html">Micaela Jorio</a>
        <a class="dropdown-item" href="InsMaurizioPignotti.html">Maurizio Pignotti</a>
       </div>
       </li>
      <li class="nav-item">
        <a class="nav-link" href="Orari.html" style="color: #639; font-family: Novecentosanswide-Bold, Arial, Helvetica, sans-serif;"> Orari  </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Sede.html" style="color: #639; font-family: Novecentosanswide-Bold, Arial, Helvetica, sans-serif;"> Sede  </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Eventi.html" style="color: #639; font-family: Novecentosanswide-Bold, Arial, Helvetica, sans-serif;"> Eventi </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Contatti.html" style="color: #639; font-family: Novecentosanswide-Bold, Arial, Helvetica, sans-serif;"> Contatti </a>
      </li>
      <!--span class="navbar-text">
        tel. +39 329 2849775
      </span-->
      <!--li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li-->
    <ul>
    <!--form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form-->
  </div>
</nav>
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.250
324
83
@mizzium
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code.gif
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box inserisci 2.png.JPG

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro

Per il tuo menu nelle pagine dove lo vuoi inserire nel punto dove deve comparire metti questo codice;
Codice:
<script language="javascript" src="menu.js" type="text/javascript"></script>
Ti allego il file JS del menu!
Ovvio che nel codice siora devi mettere il percorso di dove andrai a mettere il file
 

Allegati

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.250
324
83
Scusani ho fatto un errore il file buono è questo
 

Allegati

mizzium

Nuovo Utente
18 Nov 2018
6
0
1
Ho provato a inserire il menu ma vedo che dà questo errore

Imported resource at 'file:///D:/Yoga%20VT%20Sito/js/webmenu.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.250
324
83
Cime vedi a me non da errori!
Ho notato che hai cambiato il nome al file menu.js se cabi dei nomi li devi cambiare sia nel file che nel richiamo
Controlla i nomi e i percorsi.
Potrebbe anvhe essere un'altro script che va in conflitto!
Hai usato l'ultimo file che ti ho mandato?
Insomma l'errore non dipende dal codice che ti ho fornito
file_2018_11_19 16_54_54.jpg
 

mizzium

Nuovo Utente
18 Nov 2018
6
0
1
Max1 , ti sto chiedendo un aiuto, non sto dicendo che il tuo codice non è buono. Anzi adesso funziona anche se mi continua a dare lo stesso errore. Strano ma ok, non ci faccio caso. Comunque grazie mille, sei stato veramente prezioso e preparato. Se dovessi modificare il menu, devo stare attento ai back slash se ho capito bene!?!?!?