[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
    LESS Framework v7
     
  2. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    ti ho chiesto diverse volte se ha provato la mia... No mi hai risposto. In ogni caso ho modificato il tuo codice del post precedente integrando la mia funzione, prova e fammi sapere.
    Codice:
    <!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <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>
            
            
    <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>
     
  3. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Scusa, avevo detto solo che ho provato le vostre soluzioni proposte, non ti ho risposto individualmente.
    Comunque anche così non va.
     
    Ultima modifica: 23 Aprile 2018
  4. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ho provato anche questa (trovata altrove):
    Codice:
    <script type="text/javascript">
    
        //attivazione del menu
        function setActiveMenu(mnuId){
          var ul=document.getElementById("menunav");
          var lis=ul.getElementsByTagName("LI");    
          for(var i=0; i<lis.length; i++){
             if(lis[i].id==mnuId)lis[i].className="selected";
             else lis[i].className="";
              }
              return true;
        }
    </script>
    Ma non va, o non l'ho adattata come si deve.
     
  5. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Il sito e' online? se si manda il link che vediamo dal vivo
     
  6. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Purtroppo non ancora.
     
  7. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Allora prova cosi, apri inspector e vedi se si e' aggiunta la classe "selected""a <li> e apri anche la console e vedi eventuali errori JS.
    E vedi anche che script lavora con path, quindi il nome del sito deve essere fatto cosi example.com/galleria e non localhost/example/galleria
    Se e' come ultimo, nel mio script devi aggiungere il path mancante
     
  8. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Qui si può dare un'occhiata alla preview https://55b558c7-site-preview.spazioweb.it/home.
    Ho provato a modificare in vari modi i "case", come mi dicevi, ma niente.
     
  9. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Mi chiede il login
     
  10. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ah, giusto, non mi ero reso conto di poterlo vedere solo io, credevo fosse un link valido a prescindere dall'accesso effettuato.
     
  11. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    comunque ho provato ad aggiungere sia nomesito.it, sia 55b558c7-site-preview.spazioweb.it ai "case", ma non va. La classe "selected" non viene aggiunta.
     
  12. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Se il link del sito e' questo https://55b558c7-site-preview.spazioweb.it/home e dopo la home finale nel link non ci sono altri cartelle, nomi file , allora fai una prova, nell'ultimo codice che ho inviato, aggiungi la /home, riporto una parte modificata, nota inella condizione case : ...

    Codice:
                            case  "/home" :
                            case "home/":
                                li_id = "#menu-item_1";
                                break;
                            case  "/home/galleria":
                            case "/home/galleria/":
     
  13. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    No, ogni pagina ha il suo nome, "home" è valido solo per la homepage. Non ci sono cartelle, sono tutte pagine a sè stanti. Ho l'impressione che la difficoltà sia proprio aggiungere "selected" nell'array delle classi. Un problema simile l'ho avuto per inserire la classe "open" per far aprire il menu cliccando sull'icona per tablet e smartphone. Cosa che ho risolto così:
    Codice:
    <script>
    function showNav() {
        var element = document.getElementById("menunav");
    
        if (element.classList) {
            element.classList.toggle("open");
        } else {
            var classes = element.className.split(" ");
            var x = classes.indexOf("open");
    
            if (x >= 0)
                classes.splice(x, 1);
            else
                classes.push("open");
                element.className = classes.join(" ");
        }
    }
    </script>
    Magari da questo si può ricavarne qualcosa utile?
     
  14. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Allora in questo caso nelle prime due case : devi mettere come di seguito, loro definisco la home
    Codice:
    case  "/home" :
    case "/home/":
    E nelle altre pagine, secondo la pagina, esempio.
    Codice:
    case  "/galleria" :
    case "/galleria/":
    Ora prova a fare questa modifica e vedi con inspector del browser se si aggiunge la classe a li oppure vedi la console la presenza di qualche errore js.
     
  15. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Nulla di fatto. Ho provato anche a mettere lo script nella sezione head e non nel body, ma non cambia nulla. La console non sembra riportare errori.
     
  16. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Ma la classe aggiunge? Posta l'immagine simile a quella che posto io (la mia e' in russo, quindi non fare il caso alle lettere strane). Per lanciare questa console, in firefox premi contemporaneamente CTRL + SHIFT + I. Si apre il pannello, a sinistra vedrai il primo pulsante con il simbolo di mouse, lo clicchi e avvicina il mouse alla voce del menu.
    Vedrai classi ed i dettagli.
    Penso che magari in qualche modo non prende il CSS e voiglio vedere se classe selected si aggiunge e se si aggiunge devi solo sistemare CSS
     

    Files Allegati:

  17. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Aggiungo, il secondo pulsante da sinistra e' console, la puoi vedere eventuali errori JS
     
  18. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    No, non aggiunge la classe, ma il CSS è corretto, perché se aggiungo manualmente, tramite html, la classe "selected" a uno degli elementi "a", cambia effettivamente colore la voce corrispondente nel menu.
    Errori non ce ne sono, ho solo una serie di GET...
     
  19. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Mha.. Quando metti online il sito, risuscita questa discussione.
    Saluti
     
  20. marlev

    marlev Utente Attivo

    Registrato:
    19 Aprile 2018
    Messaggi:
    80
    Mi Piace Ricevuti:
    1
    Punteggio:
    6
    Sesso:
    Maschio
    Home Page:
    Aggiungo alla risposta precedente.
    Oppure contattami attraverso il mio sito e se ci mettiamo d'accordo te lo sistemo io.
     
Sto caricando...

Condividi questa Pagina