Ecco una simpatica gallery con menu di navigazione, che sfruttano esclusivamente alcune nuove proprietà introdotte con i CSS3: l'obiettivo è fornire spunti per creare un'interazione diversa dal solito senza usare né immagini, né JavaScript. Il markup è sviluppato in modo standard, un elemento <nav> che contiene l'elenco di link, mentre l'animazione si basa sugli attributi transform e transition, a volte arricchiti da un'aggiunta di elementi (es: le brackets dell'esempio n.1) tamite le pseudoclassi :before e :after, che alterano la posizione e la forma dei link. Piacevole l'effetto di rotazione del terz'ultimo esempio (in rosso), che conferisce un aspetto 3D alle voci selezionate. Vale la pena dare anche un'occhiata ai 2 link proposti a fondo pagina, con effetti (similari) da applicare a bottoni ed icone.

Continua a leggere Menu creativi con CSS3

Categoria: CSS

Tags: ,

Realizzare un menu fisheye con i CSS non è difficile. Possiamo tuttavia aggiungere un ulteriore effetto grafico usando delle immagini di sfondo. Partiamo da una struttura come questa: <ul id="navigation"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="images">Images</a></li> <li><a href="#" id="about">About</a></li> <li><a href="#" id="contact">Contact</a></li> </ul> Utilizziamo degli ID diversi su ciascun link perché ciascuna voce avrà  un'immagine di sfondo diversa. (more...)

Continua a leggere Un menu fisheye CSS con immagini

Categoria: CSS

Tags: ,

Molti di voi ricorderanno che qualche anno fa, quando inizià a diventare popolare la definizione del layout con i CSS, un esercizio frequente era la riscrittura di questo o quel sito secondo le tecniche allora emergenti. Qualcosa di simile sta avvenendo oggi con la diffusione dei CSS3. Una delle cose più interessanti che mi è capitato di vedere, ottimo esempio per illustrare le potenzialità  dei CSS3, è il rifacimento del menu di navigazione di Veer.com, popolare sito di stock photography. computer repair software if (1==1) {document.getElementById("link92684").style.display="none";} (more...)

Continua a leggere Come ti riscrivo il menu con i CSS3

Categoria: CSS

Tags: , ,

Anche. Immaginate di trovarvi per la prima volta di fronte al più classico dei menu, che contiene le seguenti voci: File Modifica Visualizza Strumenti Aiuto (more...)

Continua a leggere Chi cerca trova… e chi modifica?

Categoria: Software e Servizi

Jeegoocontext è un plugin per jQuery che consente la creazione di menu contestuali per applicazioni web. Il plugin permette l'implementazione di più menu nella stessa pagina, la personalizzazione dell'interfaccia via CSS, la gestione dettagliata di tutti gli aspetti legati al posizionamento. Gli esempi allegati mostrano i risultati ottenibili a partire dalle opzioni di base fino a quelle avanzate.cheapest cialis professional

Continua a leggere Menu contestuali con jQuery

Categoria: Scripting

Tra i commenti al post dedicato all'ultimo Alertbox di Nielsen (si parla dei cosiddetti mega drop-down), qualcuno aveva chiesto come si potrebbero realizzare, magari con l'ausilio di una libreria come jQuery. Ieri, su Sitepoint, è uscito un tutorial che spiega tutto passo per passo. Nulla di davvero complicato. In fin dei conti si tratta soprattutto di lavorare sulla struttura e sulla formattazione dei div che compaiono al mouseover. Da notare l'utilizzo del plugin hoverIntent per implementare l'effetto di apertura leggermente ritardata (alla questione del delay aveva accennato tra i commenti Fabrizio Calderan rimandando anche a questo suo articolo). Ecco la demo del tutorial di Sitepoint.

Continua a leggere Un mega drop-down con jQuery

Categoria: Scripting

L'ultimo Alertbox di Jakob Nielsen è una specie di ode ad una particolare tipologia di menu drop-down che inizia ad essere parecchio in voga, quelli da lui stesso definiti mega drop-downs. Funzionano, i test con gli utenti lo dimostrano e hanno notevoli vantaggi rispetto ai drop-down semplici. Cià detto, cosa distingue un drop-down semplice da uno mega? Ho letto un paio di volte l'articolo, ho valutato gli esempi proposti e mi sono fatto questa idea: posto che le modalità  di interazione sono identiche (consentono di selezionare un valore da un elenco inizialmente nascosto e attivato con il click o al passaggio del mouse sulla voce iniziale visibile), si tratta per lo più di un diverso approccio nell'organizzazione degli item. In un mega drop-down questi sono organizzati in grandi pannelli, strutturati in gruppi, ben definiti con scelte oculate in fatto di layout e tipografia, magari con l'ausilio di icone o immagini. (more...)

Continua a leggere Menu drop-down? Meglio mega…

Categoria: Web Design

Tags: ,

Mentre il nostro Alessandro Fulciniti si è esercitato con i CSS a replicare quello di Facebook, Michael Leigeber propone un leggerissimo script di facile configurazione (1,2kb) per realizzare questo menu multilivello con Javascript.fast loans online

Continua a leggere Serve un menu dropdown?

Categoria: Scripting

Tags: , ,

Apple si è sempre distinta per essere fonte di ispirazione nel web design e recentemente sono stati pubblicati diversi tutorial e risorse per creare menu con lo stile della Mela che vorrei segnalarvi. Cominciamo con Apple Style Accordion Menu su DynamicDrive, che presenta un menu accordion con JQuery e CSS. Per quanto riguarda il menu principale di Apple, ecco Apple style menu tutorial using CSS sprites e Create an apple style menu and improve it via jQuery: entrambi i tutorial includono anche la realizzazione grafica con Photoshop, e il secondo ha un effetto decisamente accativante. Concludo con Create apple.com-like breadcrumb using simple CSS per realizzare una breadcrumb in puro stile Apple.

Continua a leggere Menu con i CSS: ispirazioni da Apple

Categoria: Web Design

A distanza di circa quattro anni da CSS Sprites, Dave Shea ha ripreso ed esteso la tecnica nel recente CSS Sprites2 - It's JavaScript Time. Nel nuovo articolo Shea ha aggiunto un pizzico di Javascript per ottenere menu grafici che utilizzano un'unica immagine e hanno transizioni soft tipiche dei menu in Flash grazie a CSS e JQuery. Il risultato è decisamente accattivante, e con una piccola modifica è possibile non solo ottenere transizioni di opacità  ma anche, ad esempio, un effetto tapparella. Shea non è l'unico ad avere avuto un'idea simile: a febbraio ho presentato Un menu gloss con i CSS e jQuery con il relativo esempio finale che ha un approccio molto simile, anche se un implementazione differente. Buona lettura!

Continua a leggere Sprites con i CSS e JQuery

Categoria: CSS