paitadesignblog » current http://www.paitadesign.com/blog HTML, CSS e tutto il resto Thu, 06 Oct 2011 09:55:22 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 PHP CSS o jQuery: come evidenziare la pagina corrente nel menù di navigazione http://www.paitadesign.com/blog/php-e-css-come-evidenziare-la-pagina-corrente-nel-menu-di-navigazione/ http://www.paitadesign.com/blog/php-e-css-come-evidenziare-la-pagina-corrente-nel-menu-di-navigazione/#comments Sun, 27 Dec 2009 19:23:26 +0000 Giacomo Paita http://www.paitadesign.com/blog/?p=179 Suggeriscimi un argomento!]]> Quando i visitatori navigano nel nostro sito, è importante fare in modo che abbiano più informazioni possibili: dalla semplice visione di insieme, alla rintracciabilità delle sezioni corrette in relazione all’informazione cercata. Ai fini dell’usabilità, è inoltre importante segnalare in ogni pagina in quale sezione o punto del sito ci si trova. Per fare questo in modo automatico, utilizzeremo un po’ di programmazione in PHP e assegneremo al menù degli stili tramite i CSS.


Il primo metodo che suggerisco consente di segnalare la pagina corrente in modo dinamico, ma ha il limite di non poter essere utilizzato con menù che sfruttano la tecnica CSS dello "sprite image". Il secondo metodo sfrutta il body id ed è compatibile con lo "sprite image", ma non è dinamico.

PHP: evidenziare la pagina corrente in modo dinamico

Ecco un esempio di menù di navigazione generico per un sito web:

<div id="main_nav">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="Identity.php">Identity</a></li>
    <li><a href="logo.php">Logo</a></li>
    <li><a href="small_graphic.php">Small Graphic</a></li>
    <li><a href="video.php">Video</a></li>
    <li><a href="contatti.php">Contatti</a></li>
  </ul>
</div>

Salviamolo come file esterno nella cartella dei file inclusi e al suo posto scriviamo in pagina queste righe di codice:

<?php
	$menu=file_get_contents("inc/main_nav.php");
	$base=basename($_SERVER['PHP_SELF']);
	$menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li class=\"current\">$1</li>", $menu);
	echo $menu;
?>

Ecco cosa stiamo facendo: memorizziamo nella variabile menu il nostro menù di navigazione.
Utilizziamo poi la funzione basename che restituisce, dato un percorso, la componente di questo identificata da un nome di file ($_SERVER è un array contenente delle variabili impostate dal Web Server oppure direttamente legate all’ambiente di esecuzione dello script corrente; PHP_SELF restituisce il nome del file dello script correntemente in esecuzione), e la memorizziamo nella variabile base. Nella riga successiva preg_replace effettua una ricerca di una espressione regolare e la sostiutisce: in questo caso ricerca il link con attributo href uguali alla pagina in cui ci troviamo e lo sostituisce con un elemento li con assegnata la classe current, che definisce lo stile da assegnare al link della pagina corrente.
Infine tramite echo $menu stampiamo in pagina il menù. È da notare che stiamo sostituendo un link con un elemento list-item, in modo tale che il collegamento alla pagina in cui siamo non sia attivo.

CSS: evidenziare la pagina corrente con il body id

Se per esigenze di layout abbiamo impostato il menù tramite la tecnica cosiddetta “css sprite image“, non possiamo utilizzare la programmazione come nell’esempio precedente, ma possiamo evidenziare la pagina corrente nel menù di navigazione dichiarando un id specifico per il tag body e assegnando nel foglio di stile un comportamento specifico per il link della pagina in cui siamo. Ecco un esempio di codice html:

<body id=logo>
...
<div id="main_nav">
  <ul>
    <li><a id="main_nav_index" href="index.php">Home</a></li>
    <li><a id="main_nav_immagine_coordinata" href="immagine_coordinata.php">Identity</a></li>
    <li><a id="main_nav_logo" href="logo.php">Logo</a></li&gt
    <li><a id="main_nav_small_graphic" href="small_graphic.php">Small Graphic</a></li>
    <li><a id="main_nav_video" href="video.php">Video</a></li>
    <li><a id="main_nav_contatti" href="contatti.php">Contatti</a></li>
  </ul>
</div>
...
</body>

Ed ecco come impostare il codice CSS associato:

/* pagina "Logo" */
#logo #main_nav #main_nav_logo a {
  background:url(../gfx/main_nav.gif) no-repeat -90px -61px; /*Posizionamento dell'immagine per evienziare la pagina corrente */
}

Come rendere questo esempio più dinamico? Possiamo sfruttare anche in questo caso gli snippet PHP che abbiamo usato nell’esempio precedente:

<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">
<?php require_once('inc/main_nav.php'); ?>
...
</body>

In questo modo l’ID dela pagina sarà uguale all’indirizzo della pagina in cui è inserito il menù.

jQuery: evidenziare la pagina corrente in modo semplice!

Ecco un esempio di codice per il menù di navigazione che si autoevidenzia con jQuery:

<div id="mainNav">
 <ul>
  <li><a id="home" href="index.html">Home</a></li>
  <li><a id="chi" href="chisono.html">Chi sono</a></li>
  <li><a id="cosa" href="cosafaccio.html">Cosa faccio</a></li>
  <li><a id="dove" href="dovesono.html">Dove sono</a></li>
 </ul>
</div>

Occorre prima scaricare il plugin jQuery URL Parser e poi scrivere queste righe di codice:

	$page = jQuery.url.attr('file');
	if(!$page) {
		$page = 'index.html';
	}
	$('ul.navigation li a').each(function(){
		var $href = $(this).attr('href');
		if ( ($href == $page) || ($href == '') ) {
			$(this).addClass('on');
		} else {
			$(this).removeClass('on');
		}
	});

Letture consigliate

jQuery and CSS: highlight the current page in a navigation
Showing current page with PHP
Highlight current page in navigation with PHP
Setting the current menu state with CSS

Suggeriscimi un argomento!

]]> http://www.paitadesign.com/blog/php-e-css-come-evidenziare-la-pagina-corrente-nel-menu-di-navigazione/feed/ 1