[Javascript] Voce del menu evidenziata in base alla pagina attiva

Discussione in 'Javascript' iniziata da PavlovTheDog, 23 Aprile 2018.

  1. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Salve amici.
    Ho bisogno di fare in modo che nel mio menu di navigazione venga evidenziata la voce relativa alla pagina che si sta visitando in quel momento.
    Ho provato varie soluzioni javascript, ma credo che, essendo un neofita, non riesco ad adattarle come si deve.

    Il codice HTML del menu è del tipo seguente:

    HTML:
    <div id="page-zones__template-widgets__extendednavigation-navigation" class="widget extendednavigation" data-widget-type="extendednavigation" data-uniqueid="page-zones__template-widgets__extendednavigation-navigation">
      <div class="extendednavigation"  align="center">
        <ul id="menunav" class="js-menu-list 13-items">
           <li id="menu-item_1" class="home  page"><a href="/"><span class="text">pagina iniziale</span></a></li>
           <li id="menu-item_2" class="page  folder" aria-haspopup="true"><a href="/galleria"><span class="text">galleria</span></a>
             <ul class="js-menu-list 2-items page">
               <li id="menu-item_3" class="page"><a href="/acquerello"><span class="text">acquerello</span></a></li>
               <li id="menu-item_4" class="page"><a href="/incisione"><span class="text">incisione</span></a></li>
              </ul>
           </ul>
             <a onclick="showNav()" href="#" class="pull  js-pull"></a>
    </div>
    </div>
    
    Ho già impostato la classe "li.selected a .text" nei CSS con un colore specifico.

    Grazie a chiunque voglia aiutarmi con javascript.
     
  2. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Ciao, questo html sta in un file php?
     
  3. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.768
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    Cosa centra Javascript? Non basta il CSS?
     
  4. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    E come definisci la pagina attiva?
     
  5. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    In ogni caso prova questo, che e' in jQuery.
    Codice:
     
    <script>
    
                jQuery(document).ready(function () {
                    function current_page() {
                        var pathname = window.location.pathname;
                         var li_id;
                        switch (pathname) {
                            case  "" :
                            case "/":
                                li_id = "#menu-item_1";
                                break;
                            case  "/galleria":
                            case "/galleria/":
                                li_id = "#menu-item_2";
                                break;
                            case  "/acquerello":
                            case "/acquerello/":
                                li_id = "#menu-item_3";
                                break;
                            case  "/incisione":
                            case "/incisione/":
                                li_id = "#menu-item_4";
                                break;
                            default :
                                li_id = "not_a_menu";
                        }
    
                        if (jQuery(li_id).length) {
                            jQuery(li_id).addClass("selected");
                        }
    
                    }
                    current_page();
                });
            </script>
    
    Se la libreria jQuery non e' caricata, prima del codice qui sopra aggiungi questo
    Codice:
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     
  6. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.768
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    Index
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style>
    .attiva {
        background: #FF0004;
        color: #FFFFFF;
    }
    </style>
    </head>
    
    <body>
    <ul>
        <li class="attiva"><a href="index.html" target="_self">Home</a></li>
        <li><a href="pag1.html" target="_self">pag1</a></li>
        <li><a href="pag2.html" target="_self">pag2</a></li>
        <li><a href="pag3.html" target="_self">pag3</a></li>
    </ul>
    </body>
    </html>
    pag1
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style>
    .attiva {
        background: #FF0004;
        color: #FFFFFF;
    }
    </style>
    </head>
    
    <body>
    <ul>
        <li><a href="index.html" target="_self">Home</a></li>
        <li class="attiva"><a href="pag1.html" target="_self">pag1</a></li>
        <li><a href="pag2.html" target="_self">pag2</a></li>
        <li><a href="pag3.html" target="_self">pag3</a></li>
    </ul>
    </body>
    </html>
    Ecc. per le altre pagine
     
  7. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ciao. No, sta in un file.twig di un template modificabile tramite editor. Credo sia una situazione un po' particolare.
     
  8. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Ho capito, allora prova il codice che ti ho inviato nella mia risposta precedente.
     
  9. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.768
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    @PavlovTheDog
    Quando apri una discussione devi specificare tutto subito e bene
     
  10. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ciao. Sì, a questo avevo pensato, ma preferivo non aggiungere tutto sto html per fare un'operazione che ho letto si può fare con javascript più rapidamente (anche jquery, ma sinceramente ho l'impressione che non sia supportato nel mio caso).
     
  11. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    882
    Mi Piace Ricevuti:
    49
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    Pensando ad uno sviluppo veloce, potresti bindare una classe in js e banalmente senza altri plugin con Jquery immaginando di avere una soluzione del genere:
    HTML:
    ul id="menunav" class="js-menu-list 13-items">
           <li id="menu-item_1" class="home  page item"><a href="/"><span class="text">pagina iniziale</span></a></li>
           <li id="menu-item_2" class="page  folder item" aria-haspopup="true"><a href="/galleria"><span class="text">galleria</span></a>
             <ul class="js-menu-list 2-items page">
               <li id="menu-item_3" class="page item"><a href="/acquerello"><span class="text">acquerello</span></a></li>
               <li id="menu-item_4" class="page item"><a href="/incisione"><span class="text">incisione</span></a></li>
              </ul>
           </ul>
    Codice:
    $(document).ready(function(){
        var menu=$('.item');
        menu.on('click',function(){
         
             $('.item').removeClass('active');
             $(this).addClass('active');
        });
    
    });
    Dovrebbe bastare... a patto che tu non faccia il refresh!
    NB: ho aggiunto nella classe dei menu una voce item, che permette di aggiungere la classe active...
     
  12. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Hai ragione, per scarsa conoscenza, non credevo fosse fondamentale e non volevo dilungarmi troppo.
    Si tratta di un sito fatto su aruba, tramite basekit editor, modificando un template di quelli offerti. I miei file sono .twig e .less. Non so se c'è bisogno di sapere altro, scusa.
     
  13. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    882
    Mi Piace Ricevuti:
    49
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    Domanda da 1 milione di dollari, ma al click tu effettui il refresh, della pagina.... quindi a che ti serve JS???? ha ragione @Max 1 , basta il CSS!
     
  14. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Purtroppo non va. :(
     
  15. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Credo che il richiedente dovrebbe chiarire questo punto perche se usa un editor per inserimento di html e quest ultimo e' identico in piu' pagine, non puo' cambiare la classe di li attiva di conseguenza serve una cosa dinamica...
     
  16. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Hai provato quella della replica #4?
     
  17. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.768
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    Bugia che non vada!! Il mio è solo un esempio buttato lì per farti capire come funzione! È ovvio che vuole adattato al tuo contesto!
     
  18. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    882
    Mi Piace Ricevuti:
    49
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script
                src="http://code.jquery.com/jquery-3.3.1.js"
                integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
                crossorigin="anonymous"></script>
        <style>
            .attiva {
                background: #FF0004;
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
    <ul>
        <li class="attiva item"><a href="#index.html" target="_self">Home</a></li>
        <li class="item"><a href="#pag1.html" target="_self">pag1</a></li>
        <li class="item"><a href="#pag2.html" target="_self">pag2</a></li>
        <li class="item"><a href="#pag3.html" target="_self">pag3</a></li>
    </ul>
    
    <script>
        $(document).ready(function(){
            var menu=$('.item');
            menu.on('click',function(){
                $('.item').removeClass('attiva');
    
                $(this).addClass('attiva');
            });
    
        });
    </script>
    
    </body>
    </html>
     
  19. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Sì, effettua il refresh.
    Tento di chiarire ancora meglio. Ho un file "layout.twig" impostato così:
    HTML:
    <!doctype html>
    <!--[if lt IE 7]>
        <html class="no-js ie6 oldie" lang="en">
    <![endif]-->
    <!--[if IE 7]>
        <html class="no-js ie7 oldie" lang="en">
    <![endif]-->
    <!--[if IE 8]>
        <html class="no-js ie8 oldie" lang="en">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <html class="js" lang="{{ page.seoLang }}">
    <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <title>{{ page.title }}</title>
        <meta name="keywords" content="{{ page.keywords }}" />
        <meta name="description" content="{{ page.description }}" />
        <meta http-equiv="content-language" content="{{ page.seoLang }}" />
    
        {% if site.favicon %}
            <link rel="icon" href="{{ site.favicon['favicon'] }}" type="image/x-icon" />
            <link rel="SHORTCUT ICON" href="{{ site.favicon['thumbnail'] }}?v={{ "now"|date("U") }}" type="image/x-icon" />
        {% endif %}
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
    
        {% include basekit.headScript %}
    
    </head>
    
    <body class="{{ page.backgroundClass }}">
    
        {% block content %}
        {% endblock %}
        
        {% include basekit.bodyScript %}
        
    
    <script type="text/javascript">
        ! function () {
            function supportsSVG() {
                return !!document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect
            }
            if (supportsSVG()) document.documentElement.className += ' svg'
        }()
    </script>
    
    </body>
    </html>
    
    E poi un home.twig e un default.twig che estendono l'html del layout.
    Ho provato le vostre soluzioni, adattandole, ma per ora nada. E' anche molto probabile che io sbagli qualcosa quando le adatto, essendo un neofita. Vi prego di avere pazienza.
     
  20. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    882
    Mi Piace Ricevuti:
    49
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    Che framework utilizzi?????
    Al effettua il controllo sulla GET!
     
Sto caricando...

Condividi questa Pagina