Voce del menu selezionata in base alla pagina corrente

kungfujava · 27 Gen 2014

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 · 28 Gen 2014

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 · 29 Gen 2014

Grazie mille per la risposta, nel frattempo ho risolto in js ma proverò questa soluzione senz'altro!

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

felino · 29 Gen 2014

Posta la tua soluzione in JS, magari potrebbe essere utile ad altri utenti.

kungfujava · 29 Gen 2014

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.

borgo italia · 29 Gen 2014

ciao
posta la tua soluzione negli snipet js, se qualcuno ne ha bisogno li è più facile trovarla

Cerca

Cerca

Voce del menu selezionata in base alla pagina corrente

kungfujava

Nuovo Utente

felino

Utente Attivo

kungfujava

Nuovo Utente

felino

Utente Attivo

kungfujava

Nuovo Utente

borgo italia

Super Moderatore

Discussioni simili