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

[macus_adi]

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

Non è del tutto vero.... In basso è riportato esattamente questo caso, anche se duplichi codice a go go su più pagine lo script continua a funzionare, naturalmente deve essere incluso su più pagine.

Mantenendo la logica usata fin d'ora, potresti aggiungere un piccolo script:

$(document).ready(function(){
    $('.item').removeClass('attiva');
    var url = window.location.href.split('/').pop();
    var links=$('.nav_item');
    _.each(links,function(v,k){
        var current=$(v).attr('href');
        if(url===current){
            $(v).parent().addClass('attiva');
        }
    });
});

Il tuo html dovrebbe diventare una cosa del genere, aggiungi la classe nav_item al tag a

<ul>
    <li class="attiva item"><a href="home.php" class="nav_item" data-name="home" target="_self">Home</a></li>
    <li class="item"><a href="pag1.html" class="nav_item" data-name="pag1" target="_self">pag1</a></li>
    <li class="item"><a href="pag2.html" class="nav_item" data-name="pag2" target="_self">pag2</a></li>
    <li class="item"><a href="pag3.html" class="nav_item" data-name="pag3" target="_self">pag3</a></li>
</ul>

Lascia stare i data-name ho fatto una prova non inerente a questo contesto, e includi la Lib Underscore in tutte le pagine:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>

Con queste linee di "codice" anche se ricarichi la/e pagina e/o aggiungi pagine a go go, non hai bisogno di scrivere / aggiungere nulla sullo script, in quanto attraverso l'each verifica tutti gli elementi del menu.

Risultato funzionante!

 

[PavlovTheDog]

Buongiorno Macus.
Ho provato a cambiare lo script in questo modo, visto che tutti i "li" hanno già la classe "page" e ho sostituito "attiva" con "selected", che è il mio CSS per la pagina attiva:

 $(document).ready(function(){
    $('.page').removeClass('selected');
    var url = window.location.href.split('/').pop();
    var links=$('.nav_item');
    _.each(links,function(v,k){
        var current=$(v).attr('href');
        if(url===current){
            $(v).parent().addClass('selected');
        }
    });
});

Pare non funzionare nel mio caso, ma a questo punto, scusandomi per la mia scarsa conoscenza sull'argomento, ho dei dubbi:
1) in che posizione dell'html devo inserire

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>

, va bene anche subito prima della funzione js in questione?

2) qual è il tag corretto per includere la funzione?
3) se ho un'altra funzione js nella pagina, le inserisco nello stesso tag "<script></script>", semplicemente separandole con ";"? O devo mettere tag separati? (ho già provato in entrambi i modi).

 

[macus_adi]

Vedi l'esempio!

 

[Max 1]

Non posso credere che si debba cercare un improbabile modo in JS e non poter usare il css e basta

 

[macus_adi]

@Max 1 hai ragione, sarebbe stato meglio avere il menu a modi widget, con classe adatta al caso, ma mi pare di aver capito che di classi / funzioni / mvc / ogetti non si parla, quindi non credo sia la strada giusta da perseguire in caso di mancata conoscenza degli strumenti...
Sarebbe utile, magari qui tutti ne parlano ma pochi lo fanno, utilizzare il modello MVC, demandando al controller l'onere di effettuare le opportune verifiche sul menù.
In un caso drastico, avendo replicato il menu a manina su 100 pagine, come ti comporteresti, scrivendo la logica su tutti i file?
Indubbiamente concordo con te, quindi sarebbe da scrivere ex-novo parametrizzando il tutto nel giusto modo...

 

[PavlovTheDog]

Non posso credere che si debba cercare un improbabile modo in JS e non poter usare il css e basta

@Max 1 hai ragione, sarebbe stato meglio avere il menu a modi widget, con classe adatta al caso, ma mi pare di aver capito che di classi / funzioni / mvc / ogetti non si parla, quindi non credo sia la strada giusta da perseguire in caso di mancata conoscenza degli strumenti...
Sarebbe utile, magari qui tutti ne parlano ma pochi lo fanno, utilizzare il modello MVC, demandando al controller l'onere di effettuare le opportune verifiche sul menù.
In un caso drastico, avendo replicato il menu a manina su 100 pagine, come ti comporteresti, scrivendo la logica su tutti i file?
Indubbiamente concordo con te, quindi sarebbe da scrivere ex-novo parametrizzando il tutto nel giusto modo...

Beh, di fatto nell'editor di aruba già c'è un widget che fa da menu di navigazione (widget.extendednavigation) e in effetti l'html che ho utilizzato è esattamente quello estrapolato, per mezzo della console, dal widget base, perché mi serviva il menu sia in italiano che in inglese, e l'editor non consente di inserirne due, o per lo meno io non so come si possa fare e aruba non da assistenza sviluppo, mentre basekit (proprietario dell'editor), non la fornisce ai clienti aruba .
Purtroppo, il mio html, pur avendo id e classi del tutto simili a quelle del widget.extendednavigation, non assorbe tutte le funzioni js di quel widget (contenute in un file js lunghissimo, di cui non conosco la esatta collocazione, e per me molto complesso), in particolare per la parte responsive e per mettere in evidenza la voce attiva.
Ieri, vedendo che non arrivavamo a una soluzione, ho risolto coi CSS, ma per fare questo ho dovuto creare ben 10 file.twig aggiuntivi per le singole pagine, oltre a quelli della home in italiano e della home in inglese, quindi 12 in totale. Originariamente ne avevo solo 4 (home e default, italiano e inglese) e speravo, con js di potere appunto ridurre la cosa.

 

[PavlovTheDog]

Macus, penso di aver seguito bene il tuo esempio, ma non va. Preciso che nel mio caso il menu è nell'head e non nel body.

 

[PavlovTheDog]

aggiungo, la console da il messaggio "Caricamento non riuscito per lo <script> con sorgente “https://55b558c7-site-preview.spazioweb.it/t_lib.js”."

 

[macus_adi]

il menu è nell'head

?????? qualcosa non va....!