Voce del menu selezionata in base alla pagina corrente

kungfujava

kungfujava

Nuovo Utente
23 Ott 2013
10
0
0
Roma
Salve a tutti, ho creato un menu HTML in un file e con l include di PHP me lo importo nelle pagine che mi servono, adesso non sto riuscendo a capire come far rimanere selezionata la voce del menu corrispondente alla pagina aperta. Ho letto che posso farlo sia in PHP che JS o JQUERY..ma non ho trovato nulla che mi abbia fatto capire come fare. Se qualcuno lo ha mai fatto o sa farlo sarei lieto di ricevere suggerimenti.

Grazie in anticipo e buon lavoro.
 
felino

felino

Utente Attivo
12 Dic 2013
940
10
18
Aci Catena (Catania)
Dipende dalla struttura del tuo sito web, se ad esempio un tuo URL è del tipo:
Codice: 
<a href="index.php?page=5">VOCE 1 </a>

Sai che la pagina vista in quel momento è la 5

Quindi nel menù puoi scrivere
PHP: 
<? if(isset($_GET['page']) and $_GET['page']==5){ echo '<a href="index.php?page=5" class="current">VOCE 1 </a>'; } ?>
dove class="currrent" è una classe CSS associata al menù, che magari ti evidenzia la voce con un'altro colore, sottolineatura, etc...
 
kungfujava

kungfujava

Nuovo Utente
23 Ott 2013
10
0
0
Roma
Grazie mille per la risposta, nel frattempo ho risolto in js ma proverò questa soluzione senz'altro! :D

felino ha scritto:
Dipende dalla struttura del tuo sito web, se ad esempio un tuo URL è del tipo:
Codice: 
<a href="index.php?page=5">VOCE 1 </a>

Sai che la pagina vista in quel momento è la 5

Quindi nel menù puoi scrivere
PHP: 
<? if(isset($_GET['page']) and $_GET['page']==5){ echo '<a href="index.php?page=5" class="current">VOCE 1 </a>'; } ?>
dove class="currrent" è una classe CSS associata al menù, che magari ti evidenzia la voce con un'altro colore, sottolineatura, etc...
Clicca per allargare...
 
kungfujava

kungfujava

Nuovo Utente
23 Ott 2013
10
0
0
Roma
La mia soluzione

Posto la mia soluzione qui, in caso deve essere spostata nella sezione giusta fatemi sapere.

Allora,
se qualcuno di voi ha appena finito di creare un menu che collega a varie pagine ed avesse bisogno di evidenziare la voce relativa alla pagina visualizzata potrebbe risolvere grazie a questo piccolo script, il quale necessita della libreria jquery, liberamente scaricabile e facile da importare nei proprio progetti.

Codice: 
                 <script type="text/javascript">
                    $(document).ready(function(){
                        $('#menu a').each(function() {  // ('#menu a') si riferisce all'id del vostro tag <ul id="menu"> che a sua volta deve contenere i vari <li><a href="linkpagina">Home</a></li> e poi essere chiuso </ul>
                            if(this.href.trim() == window.location)
                                $(this).addClass("selected");
                        });
                    });
                </script>

In pratica grazie al window.location questo script è in grado capire in quale pagina siamo e vista la condizione, in breve... if= se il link è uguale alla pagina visualizzata allora aggiungi la classe selected al nostro a href.

Adesso nel vostro file .css andate poi a creare la classe da aggiungere con le vostre regole:

Codice: 
.selected {
    background-color: white;
}

a.selected{
    color: black;
}

Non dimentica ti includere nella vostra
Codice: 
<head></head>
il link alla libreria JQUERY

Codice: 
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>   // indica il path di dove si trova il file della libreria.



felino ha scritto:
Posta la tua soluzione in JS, magari potrebbe essere utile ad altri utenti.
Clicca per allargare...
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
M Mettere in evidenza la voce del menu cliccata...Help, please...!!! Javascript 8
P Effetto a:hover sempre attivo solo se si và su una voce del sottomenu HTML e CSS 1
L struttura del database (voce: in eccesso su phpmyadmin).. MySQL 2
S [PHP] menù a tendina che stampi voce scelta in precedenza PHP 1
Daniele450 [Javascript] Linkare ogni sigola voce dello stesso menu ad un div diverso della stessa pagina Javascript 3
F Problema hover voce di menù Javascript 2
M sottomenu all hover su voce contattaci jQuery 2
JackIlPazzo Estrarre voce random e verificare se è corretta PHP 8
F Selezionare voce di menu attiva HTML e CSS 1
felino register_post_type e nuova voce nel menu admin WordPress 2
felino WP-Activity: visualizzare voce menu anche agli altri utenti WordPress 0
D Eliminare voce da campo db Classic ASP 5
L menu dropdown orizzontale su 3 livelli. Evidenziare la voce generale HTML e CSS 0
M sottomenu stessa altezza di menu con voce attiva evidenziata Javascript 3
voldemort Wordpress: installazione template [era: In "Aspetto>Tema" non trovo la voce installa] WordPress 1
I pannello joomla e voce delle estensioni mancante Joomla 1
N Voce di menu JS selezionata per la pagina corrente Javascript 1
V url voce menu con parentesi [ ] wordpress WordPress 0
M Immagine diversa al rollover per ogni voce di menu Javascript 2
danlupo Stile voce Menu pagina attiva PHP 4
O se seleziono una voce in un listbox rendo visibile un altro elemento Javascript 1
E Come evidenziare la voce di menu corrente ? HTML e CSS 3
T Cancella voce da una lista Javascript 1
P C# Salvare una colonna del DataGridView XML 0
G Valore del campo id maggiore di 9999 MySQL 0
shelbystudio cliente moroso: posso disattivare email e sito in attesa del pagamento? Leggi, Normative e Fisco 3
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
L Grazie del benvenuto Presentati al Forum 0
L Decisione garante italiano del 23 giugno 2022 - Google Analytics 0
M Memorizzazione temi per le diverse pagine del sito Javascript 1
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
Barierta Testo a comparsa con passaggio del mouse Javascript 17
W Elenco dei link del file presenti in una cartella PHP 2
C Dopo chiusura del tag php la stringa html va a capo PHP 1
R Trovare la Tabella del pagamento su WooCommerce WordPress 0
R Barra del menù principale decentrata Joomla 4
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
felino Stampante Epson XP-322: nessuna traccia del colore nero! Hardware 6
M Controllo del codice fiscale/partita iva PHP 11
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A fread non legge il contenuto del file PHP 4
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
C Saluti a tutti gli utenti del Forum Presentati al Forum 0
S Trasferire dati sulle pagine del sito PHP 7
V [Buoni amazon]+[Itunes] legali e scontati del 25% Altri Annunci 0
Mastiff_84 Saluto a tutti i membri del forum Presentati al Forum 1
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1

Discussioni simili

Alto Basso