Ciao. Corvax con te. Oggi voglio continuare il tema dei menu mobili e suggerisco di farlo ma solo usando jQuery. Partire.
Creazione di layout HTML
Aggiunta di stili CSS di base
nav (background: # 3e2597; padding: 0; margin: 0;) .menu (list-style-type: none; padding: 0; margin: 0;) .menu li (float: left;) .menu li a ( display: inline-block; padding: 10px 15px; color: #fff; text-decoration: none;) .wrapper (max-width: 1024px; padding: 10px; margin: 0px auto;) .menuToggle (color: #fff; padding: 10px 15px; cursore: puntatore; display: nessuno;) corpo (altezza: 100%;) @media (larghezza massima: 640px) (.menuToggle (display: blocco;) .menu (display: nessuno; posizione: assoluta ; background: # 3e2597; larghezza: 100%; margin-left: -10px; padding-left: 10px;) .menu li (float: none;))Aggiunta di JS
Dopo aver disposto il menu stesso, dobbiamo collegare il file JS e iniziare la parte divertente.
$ (function () ($ (". menuToggle"). on ("clic", function () ($ (". menu"). slideToggle (300, function () (if ($ (this) .css (" display ") \u003d\u003d\u003d" none ") ($ (this) .removeAttr (" style ");)));));));
Diamo uno sguardo più da vicino a ciò che è scritto qui. All'inizio riagganciamo quelli che hanno perso la chiamata facendo clic sul pulsante "Menu". All'interno di questo evento, aggiungiamo la funzione slideToggle () al menu a discesa $ (". Menu"), che aprirà e chiuderà facilmente il menu a discesa.
C'è un piccolo problema che avremo quando cambiamo versione del sito e clicchiamo sul pulsante "Menu", ovvero il blocco con le voci di menu stesse verrà nascosto. per impostazione predefinita, la funzione slideToggle () aggiunge l'attributo display: none quando è chiusa. Per correggere questo bug, è necessario chiamare un callback (una funzione che verrà chiamata dopo che la funzione principale è stata elaborata) per la funzione slideToggle (). All'interno della richiamata, scriviamo una condizione. Se abbiamo un attributo nel blocco di menu uguale a "display: none", allora rimuoviamo l'attributo "style".
Conclusione
È così semplice e veloce che abbiamo creato un menu hamburger adattivo che puoi utilizzare facilmente nei miei progetti. puoi scaricare i sorgenti. Corvax era con te. Sì, nuovi incontri!
Probabilmente sei già stanco di leggere articoli e ascoltare costantemente discussioni diverse su tre brevi righe di un menu di hamburger. È un brutto trucco nel design dell'interfaccia? O non male? Questo post non è così: non giudicherà se questo menu è buono o cattivo. La linea di fondo è che penso che comunque non sia la migliore soluzione di design. Ma anche il menu hamburger ha i suoi punti di forza, soprattutto se utilizzato in un design mobile dove lo spazio è limitato. Quindi cosa possiamo fare? Accetta semplicemente il menu dell'hamburger così com'è, nonostante tutti i difetti, e vai avanti? Molti siti e app sembrano aver fatto i conti con questo. E penso di poter fare il meglio.
E poi sono successe due cose che mi hanno fatto cambiare idea. Per prima cosa, mi sono imbattuto. Questo è un articolo che ti aiuta davvero a capire le implicazioni dell'utilizzo di un menu di hamburger. In particolare, i siti con un tale menu subiscono una grave diminuzione del coinvolgimento degli utenti. La revisione di tali statistiche ha appena iniziato a cambiare la mia opinione.
L'incidente successivo è accaduto quando stavo guardando un collega che cercava di utilizzare una nuova applicazione web che aveva proprio un tale menu. Si trattava di uno sviluppatore che conosceva molto bene l'interfaccia del menu dell'hamburger, ma quando si è trattato di utilizzare l'app per le proprie esigenze, ha chiesto ad alta voce: "Come ci arrivo?" Si prega di notare che questo è uno dei le persone più intelligentiche io sappia e non ha nemmeno pensato di toccare l'icona del menu dell'hamburger. Se qualcuno di così intelligente ha problemi di navigazione, cosa significa per l'utente tipico? La mia opinione ha finalmente acquisito una solida base.
Trovare una soluzione
Basta con le ragioni della mia incredulità nel potere del menu dell'hamburger: è ora di parlare della soluzione. Per cominciare, ho esplorato i vantaggi specifici dell'utilizzo di un menu di hamburger:
- Scalabilità: Questo è probabilmente il vantaggio principale e il motivo principale per cui così tanti siti e applicazioni lo scelgono. Puoi posizionare molti elementi di navigazione dietro una piccola icona.
- Precisione: Questo va di pari passo con la scalabilità, ma non è la stessa cosa. I designer vogliono creare design puliti e ordinati lasciando abbastanza spazio per il contenuto principale. L'utilizzo di un menu di hamburger conferisce un senso di semplicità visiva che piace a qualsiasi designer.
E se vogliamo creare un'alternativa al menu dell'hamburger, deve in qualche modo risolvere i problemi ad esso associati:
- Intelligibilità: Dovrebbe essere possibile trovare facilmente gli elementi di navigazione, soprattutto per coloro che utilizzano il prodotto per la prima volta.
- Coinvolgimento: l'interfaccia dovrebbe fornire suggerimenti e feedback che spieghino cosa l'utente può fare con il prodotto e quando è appropriato utilizzare determinate funzionalità.
La parte difficile: il mobile
Ho deciso di iniziare con il problema più difficile e verificare se la mia soluzione funziona progetti mobili... Dopo aver riflettuto su un sacco di idee, sono giunto alla conclusione che il menu della barra delle schede di iOS è uno dei soluzioni migliori per interfacce mobili. Molte persone hanno cercato di rendere scorrevole la barra delle schede (per ospitare più di cinque opzioni) o di aggiungere "altro" alla navigazione, qualcosa come Plyushkin, che ha una stanza in più che si riempirà rapidamente di spazzatura. Inoltre, entrambe queste opzioni non soddisfano ancora il requisito principale: mancano chiarezza e visibilità di tutte le funzionalità. Quindi cosa puoi fare con il menu a schede per risolvere questo problema?
La mia soluzione è combinare l'hamburger e la barra delle schede in un unico approccio. Il risultato è una barra delle schede che apre una serie di opzioni per ciascuna voce di menu.
Ho creato un'app di benchmark delle prestazioni del team per illustrare il mio approccio in azione. Utilizzando questo metodo, l'utente può vedere chiaramente le principali funzioni e modalità di utilizzo del prodotto. E invece di addormentarsi con un elenco completo di voci di menu nascoste dietro l'icona dell'hamburger, all'utente vengono mostrate diverse opzioni relative alla scheda su cui ha fatto clic. Quindi la navigazione è più facile da capire e digerire, tutto ciò di cui hai bisogno è sempre a portata di mano, permette all'utente di vedere la gerarchia dell'applicazione.
Un altro vantaggio di questo design è la possibilità di utilizzare notifiche contestuali. Nel caso di un menu di hamburger, hai solo un posto per mostrare queste notifiche. Se ti attieni al layout della barra delle schede, puoi dare prompt all'utente in qualsiasi voce di menu selezionata.
Ovviamente, la più grande vittoria con questo approccio è la scalabilità. Sì, sei ancora limitato a cinque categorie, ma è una buona cosa. Onestamente, penso che qualsiasi sito possa adattare le sue opzioni in cinque categorie se il designer pensa saggiamente alla navigazione. Infatti, in ciascuna di queste categorie possono esserci cinque o sei sottovoci in più.
Si ottengono un totale di 30 possibili opzioni di navigazione senza sentirsi sopraffatti per l'utente e senza occupare l'intero spazio dello schermo.
Applicazione su tablet
Integrare una barra delle schede come questa nei tablet poiché sembra strano. I tablet sono molto più larghi e utilizzano la stessa interfaccia utente di dispositivi mobilisembrava ridicolo come un adolescente nei vestiti da cui è cresciuto molto tempo fa. Quindi sono andato dall'altra parte. Invece di posizionare la barra delle schede in basso, l'ho posizionata sul lato. Si è rivelato più conveniente in termini di utilizzo dello spazio sullo schermo e sembrava molto naturale. Inoltre, molti utenti tengono il tablet di lato, quindi questa è l'area di destinazione per il tocco delle dita.
E il desktop?
Preparati ... un menu a scomparsa. Esatto: prova questo approccio per un'interfaccia desktop e ti trovi di fronte a una realtà innegabile: questa opzione non è affatto nuova. Il menu a scomparsa esiste da anni e quasi chiunque (anche tua madre) sa come funziona. Questa è la bellezza di questo approccio - niente di nuovo.
Divulgazione completa
Non so come chiamare questa cosa. Cassetto a schede? O TABurger (TAB "tab" + hamburger)? Inoltre, non so se qualcuno ha già creato una soluzione simile. Data la semplicità di un menù del genere, non posso ammettere di essere stato il primo. So che alcune app utilizzano menu a scorrimento su alcuni pulsanti di scheda (come Tweetbot), ma di solito sono implementate come accesso veloce a funzioni per utenti avanzati e non allo scopo di aumentare la gerarchia di navigazione. Se hai un esempio del genere, fammelo sapere nei commenti.
Non importa se un tale menu è nuovo o è stato inventato da molto tempo. Ciò che conta è se si tratta di una soluzione di navigazione migliore e più creativa rispetto a un menu di hamburger. Smettila di dirti "Questo fantastico sito ha questo menu, quindi deve essere il migliore" o "Lo fanno tutti, quindi è giusto". Il design merita un approccio migliore e più ponderato.
AGGIORNAMENTI
Colleen Eberhardt ha notato su Twitter che la stessa interfaccia utente è implementata in Windows Phone... Io stesso utente di Windows Telefono, e ha ragione. Anche se questo tipo di interazione viene utilizzato in Windows Phone solo per l'opzione "altro" nella barra delle schede.
James Perich ha fornito un altro esempio su Twitter. Dai un'occhiata all'AHTabBarController creato da Arthur Hemmer.
Semplice, funzionale, intuitiva e facile da ricordare, come qualsiasi segnale stradale, l'icona dell'hamburger è diventata una vera tendenza lo scorso anno e parte integrante del design di qualsiasi sito web moderno e app mobile.
Questa semplice icona imita aspetto elenco di menu, ideale per dispositivi con schermi piccoli e siti Web in cui l'aspetto visivo è importante e la navigazione dovrebbe essere fuori mano. È una soluzione altamente efficace e praticabile che soddisfa le esigenze del mondo di oggi.
Come ogni altro elemento dell'interfaccia, l'icona dell'hamburger può presentare alcune deviazioni dalla versione originale, in base alle esigenze di ogni singolo progetto.
A seconda del progetto e del tema, l'icona dell'hamburger può assumere diverse forme che completano il design o diventano il suo tratto distintivo.
La collezione di oggi include 20 diverse varianti dell'icona dell'hamburger.
L'icona dell'hamburger del designer Dave Games dona immediatamente molta energia calda. Lo stile cartoon aggiunge giocosità e crea solo le emozioni più positive. Puoi tranquillamente utilizzare tale icona sulla maggior parte delle moderne interfacce illustrate.
Questa icona delle onde dell'oceano è stata progettata da Matt Walker. Si sentirà benissimo in vari progetti dedicati al mare. L'azzurro come colore principale e un bordo attorno lo rendono esclusivo.
Un'implementazione pulita, brillante e spiritosa consentirà a questo costrutto di funzionare come un'icona di menu sui siti culinari. In questo caso, l'interfaccia avrà un bel sapore artistico.
Il designer suggerisce 10 versioni interessanti distintivi di hamburger che sono fatti con l'anima. La serie copre diversi tipi di hamburger: uno con formaggio, un altro con pancetta, il terzo con tacchino e molti altri. Se hai un sito web o app mobilededicati al fast food, torneranno sicuramente utili. Sono così visivamente interessanti che possono trovare posto in quasi tutti gli argomenti.
E questo progetto presenta un hamburger vettoriale realistico. In questo caso il bottone di chiusura è realizzato a forma di patatine fritte, a forma di "X", con o senza salsa. Questa è una soluzione creativa che può aggiungere esotismo al design della tua pagina.
Sito ufficiale Guerre stellari include un'interessante icona di hamburger che ruota. Ogni linea è divisa in due parti in modo da ottenere il vettore di riflessione della luce delle spade laser. La soluzione migliora l'esperienza complessiva del sito e rafforza il marchio.
Il menu Burger di Peter Twauri è una versione splendidamente illustrata dell'icona. Caratteristica fondamentale Questa icona consiste in una selezione di colori che imitano un panino tagliato e una cotoletta di carne.
La serie ha varie varianti di hamburger, che vengono realizzate con uno stile di linea. Qui troverai un doppio hamburger, un hamburger di formaggio e insalata, un panino aperto e alcuni altri. Trovare soluzione perfetta per la tua interfaccia semplice e pulita, sarà facile aggiungere gusto e gusto.
L'artista mette in mostra tre versioni divertenti del pulsante: il classico hamburger, cheeseburger e hot dog. Ciascuno si basa su uno o due colori, rendendolo adatto a una varietà di minuscole interfacce. Qui, il colore crea il giusto tipo di sandwich.
L'artista offre una piccola animazione che include solo un'icona di menu e diverse transizioni fluide che accompagnano la conversione in una normale "X" (pulsante di chiusura). Ci sono effetti speciali che si verificano quando il mouse viene spostato o premuto.
A differenza della maggior parte degli esempi precedenti, questo esempio dimostra un'abile manipolazione del peso piuttosto che del colore. Le linee superiore e inferiore sono più audaci della parte centrale e creano l'aspetto giusto per l'hamburger. L'artista ha affrontato con successo il compito.
Il menu di animazione delle icone ninja di Andrew Kovardakov è diverso dalla maggior parte dei pulsanti di hamburger e offre una soluzione interessante e non comune, con sfumature misteriose e attraenti. Ogni riga rappresenta un ninja vettoriale.
E questa icona è un'illustrazione di un hamburger di insalata e formaggio. Può aggiungere sapore a qualsiasi interfaccia noiosa. Un'ottima soluzione per un sito web di un ristorante o un bar.
Questo è l'articolo in cui puoi trovare alcuni interessanti ragionamenti sull'icona del menu alla moda. È contrassegnato da un'immagine che mostra tre varianti del pulsante dell'hamburger. La prima è un'illustrazione piatta premium, la seconda è un'icona a tre linee colorate e la terza è una versione monocromatica della seconda, che è la scelta più popolare tra i designer.
GIF mostra transizioni fluide tra lo stato iniziale di questa icona minimalista ed elegante e il suo stato finale. Poiché l'animazione inizia dalla riga inferiore, è più breve delle altre.
Il menu di hamburger di Liam Spradlin sembra un set di segnalibri scolastici per i libri. Questa implementazione è audace e alquanto approssimativa. Un'icona del genere è immediatamente evidente, tuttavia può essere difficile trovare un ambiente adatto.
Finora abbiamo esaminato le icone separatamente, ma funzionano bene con le parole, specialmente quando la parola è "Menu". Anche se questo può sembrare eccessivo, sembrano sofisticati insieme. Le linee ultrasottili da 1px utilizzate in questo caso si incastrano come pezzi di un puzzle.
Il progetto dimostra che un'icona di hamburger può sembrare più luminosa e più attraente quando incorniciata. È un'ottima scelta per i piccoli dispositivi, in cui tale icona sarà comoda per la navigazione touch.
Il designer mostra un'icona a tre linee semplice ed elegante che subisce varie metamorfosi, trasformandosi in una croce o in una freccia. L'animazione include diverse soluzioni che possono tornare utili per qualsiasi progetto.
Risultato
A prima vista, potrebbe sembrare che piccole cose come l'icona del menu non dovrebbero ricevere molta attenzione. Ma se mostri un po 'di immaginazione, puoi trasformarla in una sorta di gioia per la tua interfaccia. Soprattutto se gli sviluppatori iniziano a giocare con il suo significato e usano trucchi artistici per renderlo più non convenzionale e accattivante.
