Grazie agli Hooks siamo in grado di usare lo stato nei componenti funzionali stateless senza creare necessariamente un componente di classe per utilizzarlo

Nella prima parte della guida ai React Hook approfondisco il perché e il come sono stati introdotti gli hooks e l’utilizzo dei più comuni useState e useEffect.

L’hook useState consente di gestire lo stato locale nei componente funzionali.

L’hook useEffect viene utilizzato per gestire gli effetti collaterali nei componenti funzionali.

Nella seconda parte della guida ai React Hooks presento altri due hooks utili alla gestione dello stato.

L’hook useReducer può essere utilizzato in alternativa a useState, è ideale per la gestione di stato e transazioni di stato più complessi.

L’hook useContext ti fa risparmiare lo stress di dover fare affidamento su un consumer Context e ha un’API più semplice rispetto all’API di render props.

Nell’ultima parte della guida ai React Hooks introduco altri due hooks utili per ottimizzare le prestazioni delle app in React.

L’hook useMemo usato per memorizzare i valori.

L’hook useCallback usato per memorizzare le funzioni.

All’interno della guida ho condiviso esempi di codice per ogni hook illustrato e per i quali ho inserito i link ai relativi repository.

Buona lettura!

The post Guida ai React Hooks appeared first on MaiNick Web.

Favico.js è una piccola libreria javascript che permette l’aggiunta di badges, immagini e video al posto della favicons. Addirittura è possibile attivare la webcam del pc dell’utente e visualizzare lo streaming nella favicons del sito web.

Avrete notato un certo numero di servizi web popolari, come Gmail e Facebook, hanno già questa funzionalità per notificare nuovi messaggi. Anche noi possiamo pensare di usare la favicon del nostro sito web per notifiche e budges; i budges supportano diverse animazioni per l’aggiornamento, inoltre possiano cambiare la forma, la posizione e il colore di sfondo.

Un particolare, la libreria al momento della scrittura di questo articolo non supporta IE 10+

The post Come animare favicons con immagini, badges e video appeared first on MaiNick Web.

Nel gestire grandi applicazioni Web si possono avere un sacco di righe di dati indesiderate. Ad esempio se un e-commerce è realizzato in modo da memorizzare in modo permanente la gestione del carrello dinamico, oppure la permanenza di vecchi listini divisi per gruppi d’acquisto, avremo la necessità nel tempo di cancellare questi dati dal database.

In questo articolo voglio spiegare un semplice suggerimento come utilizzare i MySQL Event Scheduler per l’eliminazione di righe di dati non più desiderati nel database.

Per abilitare la schedulazione degli eventi in MySQL bisogna eseguire la seguente query in PhpMyAdmin o in un qualsiasi altro ide per la gestione del vostro database:

SET GLOBAL event_scheduler = ON;
o
SET GLOBAL event_scheduler = 1;

Di seguito la query per creare un evento che ogni giorno cancella i dati dalla tabella del carrello di 10 giorni fà:

CREATE EVENT newEvent
ON SCHEDULE EVERY 1 DAY
DO
DELETE FROM cart WHERE created_at <= DATE_SUB(NOW(), INTERVAL 10 DAY) ;

Se si desidera modificare il tempo di esecuzione di un evento è possibile eseguendo la seguente query:

ALTER newEvent
ON SCHEDULE EVERY 5 HOUR
STARTS TIMESTAMP + 3 HOUR

Possiamo visualizzare tutti gli eventi in esecuzione:

SHOW EVENTS;

ed eliminare un evento:

DROP EVENT newEvents;

The post MySQL Event Scheduler appeared first on MaiNick Web.

Qui vi mostrerò come utilizzare la nuova Geolocation API, insieme alle API di Google Maps, per individuare la posizione dell’utente e visualizzare una mappa con quella posizione.

Dopo che la mappa è pronta, vi mostrerò come aggiungere un marker e come recuperare ulteriori informazioni sulla posizione dell’utente con una Reverse Geolocation.

Per prima cosa, diamo uno sguardo alle risorse da collegare alla nostra pagina necessari per sviluppare l’esempio:

<!-- googlemap API: fundamental to show the map -->
<script src="http://maps.google.com/maps/api/js?sensor=true"><!--mce:0--></script>

Google Maps API V3 script to visualise, modify and enrich our maps.

Documento HTML

Questo è tutto il contenuto della nostra pagina html:

<div id="map">
  <img id="mapAjaxLoader" src="img/ajax-loader.gif" alt="loader" width="32" height="32" /></div>

un div contenitore della mappa, che contiene l’immagini di loading che faremo visualizzare fino al caricamento dinamico della mappa di Google nel div mapHolder.

Foglio di stile CSS

Nel foglio di stile collegato alla pagina indichiamo solo le dimensioni del contenitore mappa.

#mapHolder{
  width:336px;
  height:224px;
}

Script in JavaScript

Come prima cosa verifichiamo se il browser supporta le Geolocation API:

// individuare il supporto del browser per Geolocation
if (navigator.geolocation !== 'undefined') {
  navigator.geolocation.getCurrentPosition(displayLocation, displayError);
} else {
  alert('Il tuo browser non supporta geolocalizzazione.');
}

il metodo getCurrentPosition di navigator.geolocation serve per rilevare la posizione del visitatore, al quale passiamo come parametri due funzioni che saranno chiamate a seconda del feedback dell’utente (se permette o rifiuta di rilevare la sua posizione):

handler displayLocation in caso di successo:

function displayLocation (position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  // chiamiamo createMap con le coordinate della posizione individuata
  createMap(position.coords);
};

position è l’oggetto generato automaticamente da getCurrentPosition, che ha due porprietà la latitudine position.coords.latitude e longitudine position.coords.longitude. Ottenuto le coordinate creiamo la mappa tramite le API di Google Maps:

function createMap(coords) {
  // crea un oggetto LatLng
  var googleCoords = new google.maps.LatLng(coords.latitude, coords.longitude);
  // opzioni da passare per la creazione della mappa
  var mapOpts = {
    zoom: 15, //zoom della mappa
    center: googleCoords, // centro mappa
    mapTypeId: google.maps.MapTypeId.ROADMAP //tipo mappa [ROADMAP - SATELLITE - HYBRID]
  };
  var mapDiv = document.getElementById("mapHolder");
  //crea oggetto mappa
  map = new google.maps.Map(mapDiv, mapOpts);
}

Creare un marker sulla mappa e ottente l’indirizzo

Per creare un marker sulla mappa ad indicare posizione individuata, chiamiamo la funzione alla fine di createMap, passandogli l’oggetto mappa e le opzioni personalizzate:

// aggiunge un marker sulla mappa utilizzando google.maps.Marker
function addMarker(map, googleCoords) {
  //opzioni per il marker
  var markerOpts = {
    animation: google.maps.Animation.BOUNCE, //animazione marker [DROP / BOUNCE]
    position: googleCoords,
    map: map,
  }
  var marker = new google.maps.Marker(markerOpts);
}

Possiamo recuperare ulteriori informazioni sulla posizione rilevata, ad esempio l’indirizzo. Dopo aver creato il marker, chiamiamo la funzione e gli passiamo le coordinate del marker:

function getCity(coords) {
  var point = new google.maps.LatLng(coords.latitude, coords.longitude);
  //crea un nuovo oggetto Geocoder
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({'latLng': point}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        //mettiamo l'indirizzo ricevuto in un div yourCITYdiv
        document.getElementById("yourCITY").innerHTML=results[1].formatted_address;
      } else {
        //in caso di errore
        document.getElementById("yourCITY").innerHTML="Ricerca indirizzo non riuscita: " + status;
      }
    }
  });
}

Nella funzione descritta sopra, definiamo un nuovo oggetto Geocoder. Analizziamo, tramite il metodo geocode, il punto definito dalle coordinate date in input alla funzione, se non si verificano errori il risultato restituirà l’indirizzo dettagliato della posizione dell’utente in results[1].formatted_address.

Conclusioni

Questo è solo un esempio di creazione della mappa utilizzando le Geolocation API di HTML5 e quelle di Google Maps. Creare una mappa è abbastanza semplice, quindi è possibile personalizzarla utilizzando tutti i tipi di metodi e proprietà delle API; per saperne di più date un’occhiata alla documentazione delle Google Maps JavaScript API V3.

The post Come creare una semplice applicazione di geolocalizzazione appeared first on MaiNick Web.

Le espressioni regolari sono delimitate, di solito un carattere barra /, e queste contengono un modello che descrive una stringa.

Di seguito alcuni semplici esempi:

• /c[ao]sa/ : corrisponde a “casa” e a “cosa”

un’espressione che descrive qualcosa che contiene la lettera “c”, seguita da qualsiasi delle vocali “a” o “o”, seguito dalle lettere “sa”.

Per indicare un intervallo di caratteri:

• /[0-9a-f]*/ : tutti valori esadecimale
• /[0-9a-zA-Z]/ : corrisponde a tutte le stringhe alfanumeriche
• /./ : il punto corrisponde a qualsiasi carattere
• /\./ : si si vuole far corrispondere realmente un punto

cercare un punto, ad esempio in nome a dominio, è necessario farlo precedere da un backslash.

Il quantificatore va messo dopo il carattere (o intervallo di caratteri) per indicare il numero di occorrenze che ci dovrebbero essere. E’ possibile dare numeri precisi o utilizzare altri caratteri come:

• /ab{2}/ : corrisponde ad un stringa che contiene due caratteri “b” di seguito, ad esempio “abb”
• /ab{2,5}/ : corrisponde ad una stringa che contiene minimo 2 caratteri “b” e massimo 5, ad esempio “abb”, “abbb”, “abbbb” e “abbbbb”
• “?” : 0 o 1 occorrenza
• “+” : 1 o più occorrenze
• “*” : 0 o più occorrenze

si noti che nei casi in cui indichiamo il numero di occorrenze massimo dobbiamo sempre specificare anche il numero di occorrenze minimo.

Facciamo un esempio:

• /c[ao]+sa/ : corrisponde a “casa” e a “cosa”, ma anche a “caasa”, “cooosa”, etc.

C’è anche il simbolo |, che ha lo stesso significato dell’operatore OR:

• /Ciao|ciao/ : corrisponde alla stringa “Ciao” oppure “ciao”.

Possiamo anche delimitare i modelli ad inizio e fine delle stringhe usando rispettivamente “^” e “$”:

• /^c[ao]sa/ : corrisponde a “casa” ma non a “andare a casa”.

Se non ricordiamo tutte le regole per costruirci i nostri modelli di espressioni regolari possiamo utilizzare uno dei tanti cheat sheet stampabili che si trovano in rete.

The post Semplici espressioni regolari appeared first on MaiNick Web.

Ho pensato di utilizzare il metodo animate() di jQuery per realizzare un sistema di votazione semplice ma bello da vedere.

L’idea è quella di animare un div espandendolo ad ogni voto ricevuto, tramite la funzione animate, aggiungendo un stesso valore alla proprietà di lunghezza del div stesso.

Documento html

<div id="container">
    <span id="question">Quale di questi framework PHP utilizzi?</span>
    <div><span>0</span><a href="">Vota</a>Zend Framework</div>
    <div><span>0</span><a href="">Vota</a>Symfony</div>
    <div><span>0</span><a href="">Vota</a>CakePHP</div>
    <div><span>0</span><a href="">Vota</a>CodeIgniter</div>
    <div><span>0</span><a href="">Vota</a>Kohana</div>
    <div><span>0</span><a href="">Vota</a>YII framework</div>
</div>

Foglio di stile CSS

* {
  font-family: Arial, "Free Sans";
}
body {
  margin: 0;
  padding: 0;
}
#container {
  margin-top: 20px;
  color: #fff;
}
#container #question {
  display: block;
  padding: 20px;
  font-weight: bold;
  letter-spacing: -3px;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 40px;
  color: #333;
}
#container div {
  font-weight: bold;
  letter-spacing: -3px;
  background: #c00;
  margin-bottom: 15px;
  padding: 10px;
  font-size: 34px;
  color: #ffffff;
  border-left: 20px solid #333;
  width: 400px;
}
#container div a {
  border: 1px solid #40392C;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-decoration: none;
  color: #0BBFEC;
  padding: 5px 15px;
  background: #2F2F2F;
  margin: 0 20px;
}
#container div a:hover {
  color: #fff;
}

Effetti con jQuery

Non dimentichiamoci di includere la libreria jQuery nell’intestazione head del documento, poi colleghiamo lo script che permette l’animazione:

$(document).ready(function() {
  $("#container div a").click(function() {
    $(this).parent("div").animate({ width: '+=30px' }, 500);
    $(this).prev("span").html(parseInt($(this).prev().html()) + 1);
    return false;
  });
});

Come potete vedere è tutto molto semplice 😉

Associamo una funzione all’evento click sul numero di voti: prendiamo il nodo/oggetto padre del link e sudi esso chiamiamo il metodo animate che genera l’animazione di allungamento in un tempo di 500 millisecondi, dunque incrementiamo il numero di voti.

Demo Download

The post Animazioni con jQuery in un sistema di votazione appeared first on MaiNick Web.

HTML5 fornisce una nuova funzionalità di caching per supportare le applicazioni web in modalità offline.

E’ necessario specificare un determinato file chiamato “cache manifest” nella pagina web a cui vogliamo applicare il sistema di caching.
L’URL del file cache manifest va specificato nel tag html del documento in cui vogliamo attivare la funzione di caching HTML5.

<!DOCTYPE HTML>
<html manifest="myapp.cache">
...

E’ importante che, per essere correttamente analizzato dal browser, il file di cache manifest deve avere come intestazione in header il tipo MIME text/cache-manifest; dunque è necessario aggiungere al web server l’associazione all’estensione del tipo di file o specificarlo manualmente, ad esempio utilizzando la direttiva header di PHP.

L’aspetto di un tipico file di cache manifest è il seguente:

CACHE MANIFEST
index.html
css/style.css
js/jquery.js
images/logo.png

NETWORK:
search.php

specifica diversi file di cache, e poi specifica che il file search.php non deve mai essere memorizzato nella cache, in modo da consentire che ad ogni tentativo di accesso al file è consentito di bypassare il file di cache.

Il procedimento di caching funziona nel momento in cui un utente fa richiesta o accede alla pagina corrispondente ad un documento a cui è associato un cache manifest, allora il browser deve prima controllare se su server quest’ultimo è stato modificato:

• se non è stato modificato, viene utilizzato il contenuto della cache
• altrimenti se presente una nuova versione del cache manifest, il contenuto presente della cache viene considerato obsoleto e ricaricato dal server.

Altra funzionalità importante del cache manifest è che può contenere anche voci di ripiego (sotto la voce FALLBACK), utilizzate dal client/browser se non è possibile recuperare il contenuto originale.

CACHE MANIFEST
index.html
css/style.css
js/jquery.js
images/logo.png

NETWORK:
search.php

FALLBACK
images/thumb.php	error.png

nell’esempio viene utilizzata un’immagine statica quando il recupero di un’immagine generata dinamicamente fallisce.

In HTML5 sono definite delle API che permettono di attivare manualmente gli aggiornamenti della cache:

• update(): aggiorna la cache per il documento corrente in background;
• swapCache(): passa alla cache dell’applicazione più recente, se vi è una più recente; valida anche per le successive richieste di risorse dalla cache;
• onchecking(): cattura l’evento checking che si manifesta quando il client/browser verifica se disponibile un aggiornamento o tenta di scaricare per la prima volta il file di cache manifest (questo è sempre il primo evento della sequenza);
• onerror(): cattura l’evento error che si manifesta per tutti gli errori che possono verificarsi del tipo: nello scaricare il cache manifest il client/browser ha ricevuto errore 404 o 410, non è stato possibile scariche le risorse elencate nel cache manifest, si è verificato un errore durante il recupero delle risorse;
• onnoupdate(): cattura l’evento noupdate che si manifesta quando il client/browser verifica se disponibile un aggiornamento il cache manifest non è cambiato;
• ondownloading(): cattura l’evento downloading che si manifesta quando il client/browser sta scaricando le risorse elencate nel cache manifest dopo aver verificato un aggiornamento di quel’ultimo;
• onprogress(): cattura l’evento progress che si manifesta quando il client/browser sta scaricando le risorse elencate nel cache manifest;
• onupdateready(): cattura l’evento updateready che si manifesta quando le risorse elencate nel cache manifest sono state appena ri-scaricate e lo script può utilizzare il metodo swapCache() per passare alla nuova cache;
• oncached(): cattura l’evento cached che si manifesta quando le risorse elencate nel cache manifest sono state scaricate e ora si trovano nella cache;
• onobsolete(): cattura l’evento obsolete che si manifesta quando per trovare il cache manifest il client/browser ha ricevuto l’errore 404 o 410, per cui la cache dell’applicazione viene cancellata;

The post Applicazioni Web Offline con HTML5 appeared first on MaiNick Web.

Per chi cerca una soluzione facile per iniziare a giocare – dipingere – con i Canvas, elemento del nuovo standard HTML5, jCanvas è un plugin jQuery che ne semplifica l’uso attraverso l’utilizzo dei metodi offerti.

E’ possibile definire la dimensione dell’elemento Canvas, le coordinate (X,Y) da cui partirà il disegno.
Molte delle forme sono già pronte, come rettangoli, ellissi o archi, definite come oggetti, e molti metodi definiti per l’utilizzo delle immagini e dei testi.
Per lo stile, tutto è reso più semplice, sfumature o pattern, i colori possono essere indicati con i nomi, in HEX, RGB o RGBA.

Il plugin è in via di miglioramento e nuove funzionalità sono aggiunte di continuo.
La pagina dedicata offre un’ottima documentazione da cui partire per iniziare nel migliore dei modi ad avvicinarsi agli elementi del nuovo linguaggio di markup HTML5.

Ecco come disegnare gli oggetti presenti dell’immagine postata all’inizio di questo articolo:

$("canvas.test").drawRect({
  fillStyle: "#000",
  x: 50, y: 50,
  width: 200,
  height: 100,
  fromCenter: false
});
$('canvas.test')
.drawArc({
fillStyle: '#729fcf',
x: 70, y: 70,
radius: 50
});

The post jCanvas: manipolare i Canvas con jQuery appeared first on MaiNick Web.

Se hai un sito web in cui memorizzi dati dell’utente è probabile che si utilizzi un database, come MySQL, SQLite o altro, ed è importante assicurarsi che il proprio database sia sicuro da e per gli utenti.

Creare istruzioni di query al volo come la sequente:

$sql = "INSERT INTO commenti (nome, commento) VALUES (".$nome.",".$commento.")";

è considerata una cattiva pratica che può essere facilmente superata, eliminando la maggior parte dei problemi, utilizzando dichiarazioni SQL prepare.

Realizzare istruzioni SQL come la precedente può essere rischioso. Se un utente malizioso invia, tramite il modulo del commento, una istruzione SQL appositamente predisposta, è possibile eseguire query al database. Invece, è necessario utilizzare dichiarazioni prepare come questa:

$sql = $db->prepare('INSERT INTO commenti (nome, commento) VALUES (?,?)');

aggiungere poi i valori singolarmente

$sql->bindParam(1, $nome);
$sql->bindParam(2, $commento);

e infine eseguire la query

$sql->execute();

Si trattano di poche righe in più, ma che rendono il vostro codice molto più sicuro.

Non solo il database deve essere al sicuro contro le query non intenzionali, ma anche gli utenti.
Se qualcuno è in grado di memorizzare un commento che sarà visualizzato da tutti gli altri utenti, allora l’input deve essere limitato a quello che ci aspettiamo, come in questo caso solo testo. Se invece permettiamo di scrivere codice HTML, un utente malizioso potrebbe caricare un malware da un altro sito, il classico exploit XSS.

Una soluzione semplice può essere l’utilizzo di funzioni per sterilizzare l’input, dunque sostituire, come nel caso citato, i tag HTML con quelli innocui.
Ad esempio, in un codice PHP che si interfaccia con un database MySQL è possibile utilizzare:

$nome = mysql_real_escape_string($_POST['nome']);

che inserisce l’escape davanti a caratteri speciali in una istruzione SQL.

Puoi leggere l’articolo su come utilizzare più istruzioni SQL prepare con PHP per approfondire l’argomento, e risolvere il problema di utilizzare più dichiarazioni SQL prepare per l’esecuzione.

The post Come rendere il database più sicuro appeared first on MaiNick Web.

Dopo aver ricevuto abbastanza e-mail e feedback in generale riguardo ad alcune richieste di modifiche, ho deciso di sviluppare una seconda versione del menu verticale con effetto a fisarmonica sperando di soddisfare la maggior parte degli utenti.

In questa seconda versione del tutorial aggiungiamo la possibilità di aprire l’elenco a tendina tramite un secondo bottone così da rimanere al link della voce del menu principale la sua funzione predefinita.

Documento HTML

Quello che andiamo a cambiare alla nostra pagina HTML è l’aggiunta di una freccia down che avrà la funzione di avviare l’effetto a fisarmonica per visualizzare le voci del sotto menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu sub-menu-open">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Aggiungiamo un’altra classe CSS sub-menu-open all’elenco del sotto menu per indicare quale di default è aperto inizialmente al caricamento della pagina.

Foglio di stile CSS

Abbiamo modificato le proprietà di alcuni selettori per utilizzare la freccia come bottone di apertura, aggiunta la classe per il sotto menu aperto di default e aggiunto il cursore di tipo puntatore quando andiamo sopra all’immagine:

ul {
	margin: 0;
	padding: 0;
}

ul.container {
	width: 240px;
	margin: 0 auto;
	padding: 50px;
}

li {
	list-style: none;
	text-align: left;
}

li.menu {
	/* Voci dell'elenco principale */
	width: 100%;
	padding: 5px 0;
}

li.title {
	display: block;
	position: relative;
	width: 200px;
	height: 34px;
	padding: 10px 20px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #cc0000;
}

li.title:hover {
	background-color: #f40000;
}

li.title a {
	/* Voce del menu principale */
	color: #ffffff;
	font-family: BPreplay,Arial,Helvetica,sans-serif;
	font-size: 21px;
	overflow: hidden;
}

li.title a:hover {
	text-decoration: none;
}

li.title a span {
	/* Questo span agisce come parte finale della sezione title */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 44px;
}

li.title img {
	/* freccia apertura sotto menu */
	float: right;
	cursor: pointer;
}

.sub-menu {
	/* Sotto menu */
	display: none;
	width: 100%;
	padding-top: 5px;
}

.sub-menu li {
	/* Voci del sotto menu */
	margin: 5px 0;
	padding: 4px 18px;
	border: 1px solid #40392c;
	background-color: #2F2F2F;
	color: #cccccc;
}

.sub-menu-open {
	display: block;
}

Effetti con jQuery

Gli script che andremo ad includere nella pagina sono gli stessi, ma bisogna dare uno sguardo allo script che gestisce l’effetto per vedere le modifiche apportate:

$(document).ready(function(){

	/* Cambiare l'effetto da utilizzare */
	$.easing.def = "easeOutBounce";

	/* Associare una funzione all'evento click sul link */
	$('li.title img').click(function(e){

		/* Trovare l'elenco a discesa che corrisponde al menu cliccato: */
		var subMenu = $(this).parent().next();

		/* Trovare il sotto menu che corrisponde alla voce cliccata */
		$('.sub-menu').not(subMenu).slideUp('slow');
		subMenu.stop(false,true).slideToggle('slow');

		/* Prevenire l'evento predefinito (che sarebbe di seguire il collegamento) */
		e.preventDefault();
	})

});

L’unica modifica effettuata riguarda il selettore su cui catturiamo l’evento click per aprire il corrispondente sotto menu.

Versione History

Ho deciso di chiamare questo secondo tutorial in questo modo perché un’altra importante richiesta ricevuta è quella di mantenere il sotto menu aperto nella pagina raggiunta da un link di uno dei sotto menu.

<?php $array_label_menu = array('jquery' => '', 'php' => '', 'css' => '', 'firefox' => '') ?>
<?php $submenu_open = (isset($_GET['menu']) &amp;&amp; $_GET['menu']!='') ? $_GET['menu'] : 'php'; ?>
<?php $array_label_menu[$submenu_open] = 'sub-menu-open'; ?>

Utilizzando un array indichiamo come chiavi di valori nulli le parole che specificano la nostra voce del menu principale e utilizzando una valore che ci inviamo tramite l’array globale $_GET andiamo a inserire la classe CSS sub-menu-open come valore alla chiave corrispondete al $_GET['menu'] inviato.

Adesso vediamo come si modifica la parte riguardo al menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/?menu=firefox">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu <?php echo $array_label_menu['firefox'] ?>">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/?menu=firefox">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/?menu=firefox">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Demo Download

The post Menu Verticale con Effetto Fisarmonica – versione history appeared first on MaiNick Web.