Visualizzazione dei risultati da 1 a 10 su 10

Discussione: Menu esterno

  1. #1

    Menu esterno

    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.
    Ultima modifica di Vincent.Zeno; 31-10-2019 a 19:22

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    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
    Ultima modifica di Vincent.Zeno; 31-10-2019 a 19:23

  3. #3
    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.

  4. #4
    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>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  5. #5
    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?

  6. #6
    Prova a postare il css che vedo un po'
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  7. #7
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    gli elementi hanno già le loro classi, dovrebbero essere richiamate senza problemi. dovrebbero

  8. #8
    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;
    }

  9. #9
    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> ");
     // -->
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  10. #10
    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.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.