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

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
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.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.935
292
83
Cosa centra Javascript? Non basta il CSS?
 

marlev

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.935
292
83
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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.935
292
83
@PavlovTheDog
Quando apri una discussione devi specificare tutto subito e bene
 

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
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

Utente Attivo
5 Dic 2017
1.028
58
48
IT/SW
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

Nuovo Utente
14 Apr 2018
24
0
1
@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

Utente Attivo
5 Dic 2017
1.028
58
48
IT/SW
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

Nuovo Utente
14 Apr 2018
24
0
1
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

Utente Attivo
19 Apr 2018
80
1
6
marlev.it
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...
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.935
292
83
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

Utente Attivo
5 Dic 2017
1.028
58
48
IT/SW
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

Nuovo Utente
14 Apr 2018
24
0
1
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.