CSS e jQuery: una combo perfetta per ottenere un filtro contenuti semplice e intuitivo

Come si fa a rendere semplice e intuitivo un sito e-commerce? Facile: organizzandolo al meglio con un filtro slide-in alimentato da CSS e jQuery.

27 Aprile 2015
Microtag Project

Innanzitutto jQuery è un software utile per rendere ottimale l’esperienza di utilizzo delle pagine HTML. Serve per semplificare le varie animazioni, la gestione degli eventi e la manipolazione di tali pagine. E’ adatto soprattutto per i siti e-commerce poichè, come ben saprai, l’utente deve concentrarsi sui prodotti che vengono offerti, riuscendo a trovarli nel minor tempo possibile, e non distrarsi a cercare il filtro giusto perdendosi nei meandri del tuo sito. JQuery sarà dunque la tua “ancora di salvezza” se il tuo sito contiene molti contenuti divisi per categorie. Ma vediamo nel dettaglio come funziona.

Per cominciare è stato integrato un plugin jQuery chiamato MixItUp, creato da Patrick Kunka, che ti permette di:

  • – Personalizzare le animazioni (creando così dei layout reattivi);
  • – aggiungere e rimuovere elementi in tempo reale;
  • – creare un’interfaccia di filtraggio semplice, o complessa, a seconda dei tuoi gusti e delle tue necessità;
  • – recuperare dati in tempo reale.

Nonostante tutte queste bellissime e interessanti funzioni, devi sapere che creare questo tipo di struttura HTML è abbastanza complesso (ma non impossibile). E’ composta da numerosi codici, tutti con una funzione diversa, ed in primis è divisa in due grandi blocchi di contenuti: header e main. Partendo da questi due elementi potrai andare a modificare la galleria, la visualizzazione dei filtri e le animazioni. Inoltre ti sarà possibile semplificare la navigazione a schede sui dispositivi mobili grazie all’inserimento di un menù drop-down (ovvero il cosiddetto menù a tendina). Per rendere ancora più intuitiva la ricerca dei prodotti desiderati, potrai inserire numerose voci nella lista degli articoli e, successivamente, dei filtri per ogni contenuto. Ad esempio: se hai un sito e-commerce che vende vestiti, le voci della lista saranno le magliette, i giubotti etc.; mentre i filtri comprenderanno il colore, la taglia etc.

Riuscirai ad ottenere uno stile unico grazie alla combo con jQuery, che ti darà la possibilità di modificare il comportamento di alcuni elementi in base a specifiche azioni. Non male, vero? Potrai usare il jQuery, ad esempio, per fissare la barra del filtro in modo che, mentre l’utente scorre la pagina, quest’ultima rimane sempre visibile e a portata di click. Un altro aspetto interessante riguarda la possibilità di modificare, soltanto nei dispositivi più grandi, la larghezza del pannello che contiene gli articoli e i filtri in modo che l’utente abbia più spazio per fare le sue ricerche. Adattando la loro larghezza non si andranno a sovrapporre al contenuto centrale bensì l’utente potrà, senza dover chiudere il pannello, continuare a modificarli guardando in tempo reale i cambiamenti.

Con questo plugin jQuery il tuo sito scalerà la vetta nel mondo del web e tutti potranno utilizzarlo senza impazzire per capire come funziona.


articoli... che potrebbero interessarti

creare un sito web... articoli consigliati

Azioni Photoshop, la raccolta definitiva

La collezione di azioni photoshop che vi presentiamo sono un set di azioni che accorrono in aiuto degli utenti per realizzare progetti rapidi e ben fatti.

Web design & Video background

Presentare la propria homepage in modo efficace con video background e comunicare contenuti e temi con video che esprimono il cuore del tuo sito web!

Tipped: i tooltip più belli senza il minimo sforzo

Si chiama Tipped e rivoluzionerà lo user interface design del vostro sito. L'applicativo offre un'ampia gamma di tooltip, belli e fruibili su tutti i dispositivi.

Dropdown menu css. Un componente responsive e facile da personalizzare

Organizza la navigazione del tuo sito con un responsive mobile menu. MegaDropdown è ideale per gli ecommerce e i portali di grandi dimensioni.

Template WordPress Responsive Free – Minimaluu

Minimaluu è la soluzione ideale per il tuo portfolio su WordPress se cerchi una grafica minimale, pulita e compatta ma anche fluida ed efficiente.

Sei un Webmaster? Il tuo sito web ha bisogno di Best 4 Webdesign!

Best4WebDesign archivia i principali e i migliori strumenti per Webmaster e Web Designer.