Download box di ricerca
Uno degli aspetti più belli di internet è poter condividere. Bighellonando sul Web ho notato che alle volte anche semplici risorse per designer sono rilasciate a pagamento. In particolare ho visto che vendevano un “pacchetto” di searchbox. Mi sono ricordato che anche a me capita spesso di farne quindi ho deciso di cercarne alcuni del mio archivio e di rilasciarli gratuitamente.
Purtroppo non sono molti e forse non sono belli come quelli commerciali, ma essendo contenuti in un PNG Fireworks sono completamente modificabili e quindi sono sicuro che riuscirete a renderli più belli di come sono .
Link che s’illuminano con jQuery
Molti templates premium fra cui ad esempio quelli rilasciati da Rockettheme, implementano questa “nuova” caratteristica di rendere i link gradatamente illuminati al momento dell’hover.
Per implementare questo effetto, basta scrivere poche semplici righe di jQuery ed inserirle nel nostro theme ed anche i link dei nostri templates si illumineranno magicamente.
Prima di vedere lo script occorre dire due cosette, la prima è che per farlo funzionare occorre oltre a jQuery anche il plugin jQuery Animate Colors, il plugin appunto per l’animazione del colore.
Come probabilmente sapete ogni script aggiunto alle nostre pagine ne aumentano la pesantezza. Occorre quindi chiedersi se vale la pena implementare jQuery e il relativo plugin solo per illuminare i link.
Il mio consiglio è di utilizzarlo solo se il template richiede già jQuery altrimenti se ne può fare anche a meno.
Lungi da me voler spiegare jQuery, sono solo un neofita con tanta passione e il mio intento è solo quello di condividere con voi queste poche righe che ho scritto.
L’HTML è composto da un semplice elenco a cui è stato aggiunto un ID chiamato “navigation”. Vedi il codice sotto.
<div id="navigation"> <h1>Demo: Link che s'illuminano con jQuery</h1> <ul> <li><a href="http://www.svegliatemplate.com/">Home</a></li> <li><a href="http://www.svegliatemplate.com/category/blog/">Blog</a></li> <li><a href="http://www.svegliatemplate.com/download/">Download</a></li> </ul>
L’ID ha il duplice scopo e cioè di segnalare l’obiettivo a jQuery e di poter impostare il colore del link sul nero (#000) tramite il CSS. Vedi il codice del CSS sotto.
<style type="text/css">#navigation li a{ color: #000; }</style>
Nell’Head della pagina bisogna ricordarci di collegare i 3 script, ovvero jQuery, il plugin per l’animazione del colore e lo script fatto da me per animare il colore dei link denominato appunto link-luminosi.js. Vedi sotto:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: Link che s'illuminano con jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/link-luminosi.js"></script>
<script type="text/javascript" src="js/jquery-animate-colors.js"></script>
<style type="text/css">#navigation li a{ color: #000; }</style>
</head>
Non resta quindi che dare una rapida occhiata al codice in modo che possiate modificarlo come volete.
Il selettore indica di agire su “#navigation li a” cioè su tutti i link (a) dell’elenco (li) che fanno riferimento #navigation.
Dopo abbiamo l’hover che è l’azione, l’hover ha due stati, quando ci passiamo sopra e quando da sopra ci allontaniamo. Come vedete quando si va sopra parte l’animazione del colore che lo porta dal colore di partenza (il nero #000 impostato dal CSS) al colore impostato da me, in questo caso il viola #FF00FF. Quando ci allontaniamo con il mouse dal link avviene il contrario, dal viola si torna al nero #000).
$(function() {
$('#navigation li a').hover(function() {
$(this).animate({'color' : '#FF00FF'}, 200);
},
function() {
$(this).animate({'color' : '#000'}, 200);
});
});
Non resta quindi che lasciarvi i link per la demo live e il download dello script comprensivo di demo.
