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

PavlovTheDog · 23 Apr 2018

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.

marlev · 23 Apr 2018

Ciao, questo html sta in un file php?

Max 1 · 23 Apr 2018

Cosa centra Javascript? Non basta il CSS?

marlev · 23 Apr 2018

Max 1 ha scritto:
Cosa centra Javascript? Non basta il CSS?

E come definisci la pagina attiva?

marlev · 23 Apr 2018

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>

Max 1 · 23 Apr 2018

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

PavlovTheDog · 23 Apr 2018

marlev ha scritto:
Ciao, questo html sta in un file php?

Ciao. No, sta in un file.twig di un template modificabile tramite editor. Credo sia una situazione un po' particolare.

marlev · 23 Apr 2018

PavlovTheDog ha scritto:
Ciao. No, sta in un file.twig di un template modificabile tramite editor. Credo sia una situazione un po' particolare.

Ho capito, allora prova il codice che ti ho inviato nella mia risposta precedente.

Max 1 · 23 Apr 2018

@PavlovTheDog
Quando apri una discussione devi specificare tutto subito e bene

PavlovTheDog · 23 Apr 2018

Max 1 ha scritto:

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

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

macus_adi · 23 Apr 2018

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

PavlovTheDog · 23 Apr 2018

Max 1 ha scritto:
@PavlovTheDog
Quando apri una discussione devi specificare tutto subito e bene

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.

macus_adi · 23 Apr 2018

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!

PavlovTheDog · 23 Apr 2018

Max 1 ha scritto:

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

Purtroppo non va.

marlev · 23 Apr 2018

macus_adi ha scritto:
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!

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

marlev · 23 Apr 2018

PavlovTheDog ha scritto:
Purtroppo non va.

Hai provato quella della replica #4?

Max 1 · 23 Apr 2018

Bugia che non vada!! Il mio è solo un esempio buttato lì per farti capire come funzione! È ovvio che vuole adattato al tuo contesto!

macus_adi · 23 Apr 2018

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>

PavlovTheDog · 23 Apr 2018

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

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.

macus_adi · 23 Apr 2018

Che framework utilizzi?????
Al effettua il controllo sulla GET!

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

Nuovo Utente

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Super Moderatore

Nuovo Utente

Utente Attivo

Super Moderatore

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Nuovo Utente

Utente Attivo

Discussioni simili