[Javascript] Voce del menu evidenziata in base alla pagina attiva
- Creatore Discussione PavlovTheDog
- Data di inizio
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.
Ultima modifica:
Ho provato anche questa (trovata altrove):
Ma non va, o non l'ho adattata come si deve.
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.
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
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.
Ah, giusto, non mi ero reso conto di poterlo vedere solo io, credevo fosse un link valido a prescindere dall'accesso effettuato.
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.
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>Allora in questo caso nelle prime due case : devi mettere come di seguito, loro definisco la home
E nelle altre pagine, secondo la pagina, esempio.
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.
Codice:
case "/home" :
case "/home/":
Codice:
case "/galleria" :
case "/galleria/":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.
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
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
Allegati
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...
Discussioni simili
