Tutorial per link evidenziati

Gli argomenti di questa pagina

  • Evidenziare la voce di menù selezionata
  • Uso dell'operatore ternario
  • I due css usati per il test
  • Come evidenziare una voce di un menù
  • Come funziona il menù principale
  • Evidenziare le voci del secondo menù
  • Come funziona il menù secondario
  • Evidenziare le voci anche in un terzo menù
  • Come funziona il terzo menù
  • Note conclusive

Evidenziare la voce di menù selezionata

In questa pagina il mio scopo è quello di illustrare un metodo di tenere evidenziato il link attivo. Questa è una necessità che si presenta in un sito dove vengono trattati molti argomenti che si sviluppano in molteplici pagine. In certe situazioni, infatti ci si trova a leggere una pagina e non ricordare il link che è stato premuto.

Per questo motivo ho sviluppato un sistema basato su querystring. E' ovvio che, perchè la cosa sia valida, è necessario che il menù sia presente in tutte le pagine, così come avviene in questo sito.

  • Per gestire un unico menù la procedura è abbastanza semplice: basta lavorare con una variabile attivata per la pagina corrente ed usarla per dare al link attivo una classe per tenerlo evidenziato.
  • Per gestire due o più menù come nel nostro caso occorre lavorare con due o più variabili da rendere attive:
    • Una variabile servirà per gestire il menù principale (settore)
    • Una variabile per gestire il menù secondario (choice)
    • Un'altra variabile per gestire il terzo menù

Un'altra pratica usata in questa procedura e quella dell'uso dell'operatore di confronto ternario '?' che ci risparmia l'uso dell'operatore di confronto IF.

Uso dell'operatore ternario

L'operatore ternario '?' offre un modo semplice e pratico per scrivere codice senza usare i classici operatori di confronto (if ed else). Invece di usare if ed else su più righe, quindi spezzando la riga di istruzione, è possibile usare questo operatore ternario così chiamato perchè usa tre espressioni:

  • la prima espressione è è di tipo booledano, cioè è una espressione che restituisce VERO o FALSO ed è seguita dal carattere '?'
  • la seconda espressione viene restituita nel caso che venda restituito VERO ed è seguita dal carattere ':'
  • la terza espressione viene restituita nel caso che venga restituito FALSO

Questo è un modo di usare l'operatore ternario:

1
2
3
<?php
echo "Test su \$sector: " . (($sector == "sett0") ? "VERO" "FALSO");
?>

Test su $sector: FALSO

Ma andiamo in ordine presentando un semplice CSS grazie al quale possiamo evidenziare e lasciare evidenziato il link appena premuto.

I due css usati per il test

Questi sono due semplici e senza pretese CSS usati per l'esempio dimostrativo. Quel che di questi CSS ci interessa sono le due classi 'active' e 'activelink', come vedremo qui di seguito.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/*   MENU ORIZZONTALE   */
#navigation {
    background: #A0C07D url(bg_nav.jpg) repeat-x;
    border-bottom: 1px solid #999999;
    padding-top: 2em;
}
#navigation ul, #navigation ul li {
    list-style:none;
    margin:0;
    padding:0;
}
#navigation ul {
    text-align:center;
    padding:0.5em 0;
}
#navigation ul li {
    display:inline;
    margin-right:0.5em;
}
#navigation ul li.last {
    margin-right:0;
}
#navigation ul li a {
    background:#FFFFFF url(bg_tab.jpg) repeat-x;
    color:#0033FF;
    border-color:#999999;
    border-style:solid;
    border-width:1px 1px 0 1px;
    text-decoration:none;
    padding:0.5em 1em;
}
#navigation ul li a:hover {
    color:#003366;
    background:#FFFFFF;
}
/* ============================================= */
/*  Questa la regola che ci interessa:           */
/*  quella relativa alla classe 'active'         */
/* ============================================= */
#navigation ul li a.active,
#navigation ul li a.active:hover {
    color: #536F34;
    background: #FFFFFF url(bg_tab_act.jpg) repeat-x;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*   MENU VERTICALE   */
.nav_vert{
    float:left; 
    margin:0 20px;
    width: 180px;
}
.nav_vert ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav_vert li a{
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    background: url("bknormal.jpg") no-repeat top left;
    height: 24px;
    padding: 4px 0 4px 25px;
    line-height: 24px;
    text-decoration: none;
}    
.nav_vert li a:link, .nav_vert li a:visited {
    color: #5E7830;
}

.nav_vert li a:hover{
    color: #26370A;
    background: url("bkactive.jpg") no-repeat top left;
}
/* ============================================= */
/*  Questa la regola che ci interessa:           */
/*  quella relativa alla classe 'activelink'     */
/* ============================================= */
.nav_vert li a.activelink{
    color: #26370A;
    background: url("bkactive.jpg") no-repeat top left;
}

Come evidenziare una voce di un menù

Partiamo da piccoli esempi.
Questo è un semplice link che esegue la sempliced apertura della pagina indicata

1
2
3
<?php
echo "<a href=\"pagina.php\">vai alla pagina</a>";
?>

Questo che segue invece è un link con querystring

1
2
3
<?php
echo "<a href=\"pagina.php?sector=settore1\">vai alla pagina</a>";
?>

Ora vediamo una querystring più complessa. In questo caso, per accodare nuove variabili, viene usato il carattere soeciale '&'. Tuttavia siccome la sintassi HTML non accetta il carattere '&' pena la non validazione del sorgente da parte del W3C validator, viene usato il suo codice: &amp;. Queste variabili inviate col link verranno, come vedremo in seguito, lette dalla pagina che viene così aperta il cui codice PHP deciderà come comportarsi e cosa fare.

1
2
3
<?php
echo "<a href=\"pagina.php?sector=settore1&amp;accetta=ok\">vai alla pagina</a>";
?>

Dopo queste premesse possiamo passare all'argomento che ci preme e cioè come evidenziare il link scelto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$sector 
"sett0";
if (isset(
$_REQUEST['settore']) && $_REQUEST['settore'] != "") {
    
$sector $_REQUEST['settore'];
}
echo 
"<div id=\"navigation\">\n";
echo 
"<ul>\n";
echo 
"<li><a" .(($sector == "sett0") ? " class='active'" ""). " href=\"index.php?settore=sett0\">HOME</a></li>\n";
echo 
"<li><a" .(($sector == "sett1") ? " class='active'" ""). " href=\"settore1.php?settore=sett1\">Settore 1</a></li>\n";
echo 
"<li><a" .(($sector == "sett2") ? " class='active'" ""). " href=\"settore2.php?settore=sett2\">Settore 2</a></li>\n";
echo 
"<li><a" .(($sector == "sett3") ? " class='active'" ""). " href=\"settore3.php?settore=sett3\">Settore 3</a></li>\n";
echo 
"</ul>\n";
echo 
"</div>\n";
?>

Come funziona il menù principale

Lo script del menù inizia col verificare la variabile 'settore' e, se la variabile è valorizzata, il suo valore viene passato alla variabile $sector.
Nel blocco che segue questa verifica vengono scritti i link; questa è la forma semplificata:
"<a href=\"index.php?settore=sett0\">HOME</a>";
Ad uno di questi link viene assegnata la classe 'active' solo se $sector contiene uno dei valori specificati.
La verifica viene effettuata usando l'operatore ternario '?'
($sector == "sett0") ? " class='active'" : ""
Se la condizione è VERA, al link viene assegnata la classe 'active', altrimenti nulla: questo che segue è quel che viene restituito nel caso che la verifica risulti TRUE
"<a class='active' href=\"index.php?settore=sett0\">HOME</a>";

Evidenziare le voci del secondo menù

Lavorando con un menù principale ed uno secondario la tecnica è la stessa ma masced una piccola complicazione. Anche il secondo menù ha bisogno di una propria variabile per decidere se e quale voce evidenziare. Tuttavia, se viene costruita la querystring come nell'esempio qui sopra, col cambio della pagina verrà persa la variabile che governa il primo menù. Per questo motivo alle varie voci del secondo menù occorre ripetere anche la variabile del primo menù. In questo modo, quando verrà caricata la pagina, il primo menù troverà la sua variabile ed il secondo menù potrà leggere la sua variabile.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$choice 
"";
if (isset(
$_REQUEST['choice']) && $_REQUEST['choice'] != "") {
    
$choice $_REQUEST['choice'];
    
$sector $_REQUEST['settore'];
}
echo 
"<div class=\"nav_vert\">\n";
echo 
"<ul>\n";
echo 
"<li><a".(($choice == "sub1") ? " class='activelink'" "")." href=\"sett0_pag1.php?settore=".$sector."&amp;choice=sub1\">sett0 pag1</a></li>\n";
echo 
"<li><a".(($choice == "sub2") ? " class='activelink'" "")." href=\"sett0_pag2.php?settore=".$sector."&amp;choice=sub2\">sett0 pag2</a></li>\n";
echo 
"<li><a".(($choice == "sub3") ? " class='activelink'" "")." href=\"sett0_pag3.php?settore=".$sector."&amp;choice=sub3\">sett0 pag3</a></li>\n";
echo 
"</ul>\n";
echo 
"</div>\n";
?>

Come funziona il menù secondario

Lo script del menù inizia col verificare la variabile 'choice' e, se la variabile è valorizzata, il suo valore viene passato alla variabile $choice e viene letta anche l'altra variabile 'settore' che accompagna la querystring ed il suo vaslore viene assegnato alla variabile $sector. Questa ultima variabile servirà al primo menù per assegnare la classe 'active' al link del settore attivo.
Nel blocco di codice che segue questa verifica vengono scritti i link e verrà assegnata la classe 'activelink' solo al link per il quale la variabile $choice soddisfa la condizione.
Selezionando una voce anche in questo secondo menù avremo questa situazione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- PRIMO MENU -->
<ul>
<li><a class='active' href="index.php?settore=sett0">HOME</a></li>
<li><a href="settore1.php?settore=sett1">Settore 1</a></li>
<li><a href="settore2.php?settore=sett2">Settore 2</a></li>
<li><a href="settore3.php?settore=sett3">Settore 3</a></li>
</ul>

<!-- SECONDO MENU -->
<ul>
<li><a class='activelink' href="sett0_pag1.php?settore=sett0&amp;choice=sub1">sett0 pag1</a></li>
<li><a href="sett0_pag2.php?settore=sett0&amp;choice=sub2">sett0 pag2</a></li>
<li><a href="sett0_pag3.php?settore=sett0&amp;choice=sub3">sett0 pag3</a></li>
</ul>
</div>

Evidenziare le voci anche in un terzo menù

Siamo arrivati alla terza sfida: governare tre menù.
Sembra essere più complesso, ma in realtà è simile alle due precedenti. Infatti la variabile da aggiungere nella querystring e che governerà il compostamento di questi link è 'file'.
Però occorre aggiungere anche le variabili 'settore' e 'choice' che portano i valori catturati dai link precedentemente inviati dai primi due menù altrimenti, con l'invio del link, andrebbero perse ed i menù precedenti non potrebbero essere governati.

Questo è il terzo menù:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$file 
"";
if (isset(
$_REQUEST['file']) && $_REQUEST['file'] != "") {
    
$file $_REQUEST['file'];
    
$sector $_REQUEST['settore'];
    
$choice $_REQUEST['choice'];
}
echo 
"<div class=\"nav_vert\">\n";
echo 
"<ul>\n";
echo 
"<li><a".(($file == "sub_011") ? " class='activelink'" "")." href=\"sub_011.php?settore=".$sector."&amp;choice=".$choice."&amp;file=sub_011\">sub_011</a></li>\n";
echo 
"<li><a".(($file == "sub_012") ? " class='activelink'" "")." href=\"sub_012.php?settore=".$sector."&amp;choice=".$choice."&amp;file=sub_012\">sub_012</a></li>\n";
echo 
"<li><a".(($file == "sub_013") ? " class='activelink'" "")." href=\"sub_013.php?settore=".$sector."&amp;choice=".$choice."&amp;file=sub_013\">sub_013</a></li>\n";
echo 
"</ul>\n";
echo 
"</div>\n";
?>

Come funziona il terzo menù

Come il solito lo script del menù inizia col verificare le variabili inviate col link, ma quella su cui si basa l'intera verifica è la variabile 'file'. Quindi valorizza le tre variabili coi valori che trova nella querystring.
Nel creare i link e relative querystring vemgono usate $sector e $choice per valorizzare le relative variabili delle querystring e viene usata $file per decidere se e quale link deve essere evidenziazto con la classe 'activelink'.
Selezionando una voce dal secondo menù verrà attivato anche il terzo menù nenendoci a trovare in questa possibile situazione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- PRIMO MENU -->
<ul>
<li><a class='active' href="index.php?settore=sett0">HOME</a></li>
<li><a href="settore1.php?settore=sett1">Settore 1</a></li>
<li><a href="settore2.php?settore=sett2">Settore 2</a></li>
<li><a href="settore3.php?settore=sett3">Settore 3</a></li>
</ul>

<!-- SECONDO MENU -->
<ul>
<li><a class='activelink' href="sett0_pag1.php?settore=sett0&amp;choice=sub1">sett0 pag1</a></li>
<li><a href="sett0_pag2.php?settore=sett0&amp;choice=sub2">sett0 pag2</a></li>
<li><a href="sett0_pag3.php?settore=sett0&amp;choice=sub3">sett0 pag3</a></li>
</ul>
</div>
<!-- TERZO MENU -->
<ul>
<li><a href="sub_011.php?settore=sett0&amp;choice=sub1&amp;file=sub_011">sub_011</a></li>
<li><a href="sub_012.php?settore=sett0&amp;choice=sub1&amp;file=sub_012">sub_012</a></li>
<li><a href="sub_013.php?settore=sett0&amp;choice=sub1&amp;file=sub_013">sub_013</a></li>
</ul>

Note conclusive

Diciamo che questa tecnica è pratica per un sito strutturato come questo, in cui il menù orizzontale è sempre presente ed i menù verticali cambiano in funzione della scedlta fatta dal menù orizzontale. Ogni settore, nella propria cartella, ha i propri menù ed eventuali sottomenù che vanno a collocarsi nella colonna di destra.

Il menù orizzontale serve per cambiare settore. Cambiando settore voglio che sia evidenziata la voce di menù scelta.
Per questo motivo nel link associo, oltre al nome della pagina da aprire, anche una querystring che contiene un valore associato ad una variabile che serve come discriminante per tenere evidenziata la voce di menù scelta.
Conseguentemente a questo link viene mostrato, se necessario, un menù secondario che conterrà le voci relative al settore scelto.

Il primo menù verticale statico è dedicato ai contenuti di ciascun settore

Il secondo menù verticale serve per navigare nel settore scelto e viene usato per aprire le pagine relative al settore ed al sottosettore scelti.

La pagina di esempio

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum