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

PavlovTheDog · 23 Apr 2018

macus_adi ha scritto:
Che framework utilizzi?????
Al effettua il controllo sulla GET!

LESS Framework v7

marlev · 23 Apr 2018

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>

PavlovTheDog · 23 Apr 2018

marlev ha scritto:

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>

Scusa, avevo detto solo che ho provato le vostre soluzioni proposte, non ti ho risposto individualmente.
Comunque anche così non va.

PavlovTheDog · 23 Apr 2018

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.

marlev · 23 Apr 2018

Il sito e' online? se si manda il link che vediamo dal vivo

PavlovTheDog · 23 Apr 2018

marlev ha scritto:
Il sito e' online? se si manda il link che vediamo dal vivo

Purtroppo non ancora.

marlev · 23 Apr 2018

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

PavlovTheDog · 23 Apr 2018

marlev ha scritto:
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

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.

marlev · 23 Apr 2018

Mi chiede il login

PavlovTheDog · 23 Apr 2018

marlev ha scritto:
Mi chiede il login

Ah, giusto, non mi ero reso conto di poterlo vedere solo io, credevo fosse un link valido a prescindere dall'accesso effettuato.

PavlovTheDog · 23 Apr 2018

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.

marlev · 23 Apr 2018

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/":

PavlovTheDog · 23 Apr 2018

marlev ha scritto:
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/":

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?

marlev · 23 Apr 2018

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.

PavlovTheDog · 23 Apr 2018

marlev ha scritto:
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.

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.

marlev · 23 Apr 2018

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

marlev · 23 Apr 2018

Aggiungo, il secondo pulsante da sinistra e' console, la puoi vedere eventuali errori JS

PavlovTheDog · 23 Apr 2018

marlev ha scritto:
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

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

marlev · 23 Apr 2018

Mha.. Quando metti online il sito, risuscita questa discussione.
Saluti

marlev · 23 Apr 2018

Aggiungo alla risposta precedente.
Oppure contattami attraverso il mio sito e se ci mettiamo d'accordo te lo sistemo io.

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

Nuovo Utente

Utente Attivo

Nuovo Utente

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Allegati

Utente Attivo

Nuovo Utente

Utente Attivo

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency