Ciao a tutti. Con te Corvax. Oggi voglio continuare il tema del menu mobile e offrirti a fare ma solo usando jQuery. Partire.
Creazione di un layout HTML
Aggiunta di stili di base CSS
NAV (sfondo: # 3E2597; imbottitura: 0; margine: 0;) .menu (tipo di lista-tipo: nessuno; imbottitura: 0; margine: 0;) .menu li (float: sinistra;) .menu li a ( Display: blocco in linea; imbottitura: 10 px 15px; colore: #fff; decorazione del testo: nessuno;) .wrapper (larghezza massima: 1024px; imbottitura: 10 px; margine: 0px Auto;) .Menutoggle (colore: #FFF; Imbottitura: 10 px 15px; cursore: puntatore; visualizzazione: nessuno;) corpo (altezza: 100%;) @media (larghezza massima: 640px) (.Menutoggle (display: nessuno; Posizione: Assoluto; Sfondo: # 3E2597; Larghezza: 100%; margin-sinistra: -10px; imbottitura-sinistra: 10 px;) .menu li (galleggiante: nessuno;))Aggiungendo js.
Dopo aver incollato il menu stesso, dobbiamo collegare il file JS e procedere al più interessante.
$ (Funzione () ($ ("menutoggle"). On ("clic", funzione () ($ (". Menu"). Slidetoggle (300, Function () (se ($ (questo) .css (" ") \u003d\u003d\u003d" nessuno ") ($ (questo) .removeattr (" stile ");)));));));
Diamo un'occhiata a ciò che è scritto qui. All'inizio, ostacoliamo i sobyti.on sul clic sul pulsante "Menu". Nell'insenza di questo evento, facciamo $ ("Menu") Il menu che paga la funzione Slidetoggle () che produrrà un'apertura regolare e la chiusura del menu.
C'è un piccolo problema che avrà quando passerà le versioni del sito e l'assunzione del pulsante "Menu", vale a dire il blocco con le voci di menu stesse. Per impostazione predefinita, la funzione di slidetoggle () quando si chiude aggiunge ATREBUT "Display: None". Per correggere questo bug, è necessario chiamare lo schake (la funzione che verrà chiamata dopo la funzione principale funziona) per la funzione di slidetoggle (). In Nutri Kolball, scriviamo una condizione. Se abbiamo un attributo nel blocco del menu è "Display: None", quindi rimuoviamo l'etubut "Style".
Conclusione
Questo è il modo in cui i rapporti semplicemente e rapidamente abbiamo creato un menu adattivo "hamburger" che puoi usare lecturalmente in multi progetti. Puoi scaricare la fonte. Con te era Corvax. Sì Nuove riunioni!
Probabilmente sei già stato stanco di leggere gli articoli e ascoltare costantemente diverse discussioni sulle tre brevi linee del menu Hamburger. È una cattiva ricezione nel design dell'interfaccia? O non male? Questo post non è così - non giudicherà, buono o cattivo questo menu. La linea di fondo è che lo considero la soluzione di design migliore, in un modo o nell'altro. Ma il menu Hamburger ha i suoi punti di forza, specialmente se utilizzati nel design mobile, in condizioni di spazio limitato. Quindi cosa possiamo fare? Basta prendere un menu hamburger che è quello che è, nonostante tutti i difetti e vivi? Molti siti e applicazioni sembrano accettarlo. E penso che sia capace di meglio.
E poi c'erano due cose che mi hanno fatto cambiare idea. Innanzitutto, mi sono imbattuto. Questo è un articolo che aiuta davvero a capire gli effetti dell'utilizzo di un menu di hamburger. In particolare, siti con un tale menu tollerano una grave diminuzione del coinvolgimento degli utenti. Una panoramica di tali statistiche ha appena iniziato a modificare la mia opinione.
Il prossimo incidente è successo quando guardavo un collega cercando di utilizzare una nuova applicazione web in cui era solo un menu del genere. È stato uno sviluppatore che ha familiarità con l'interfaccia del menu Hamburger, ma quando è arrivato all'uso della domanda per i suoi bisogni, ha chiesto ad alta voce ad alta voce: "Come posso arrivarci?". Considera questo piccole personeLo so, e non pensava nemmeno di toccare l'icona del menu di Hamburger. Se qualcuno ha così problemi intelligenti con la navigazione, cosa parla di un utente tipico? La mia opinione ha finalmente acquisito una solida giustificazione.
Cerca soluzioni
Tutto è sufficiente per le cause della mia incredulità dovuta a un menu di hamburger - è ora di parlare della decisione. Per un inizio, ho studiato i vantaggi speciali dell'utilizzo di un menu Hamburger:
- Scalabilità: Questo è probabilmente il principale vantaggio e il motivo principale per cui così tanti siti e applicazioni lo scelgono. Puoi mettere un sacco di elementi di navigazione per una piccola icona.
- Precisione: Va in una coppia alla scalabilità, ma ancora, non la stessa cosa. I progettisti vogliono creare disegni laconici e puliti, lasciando abbastanza spazio per il contenuto principale. L'uso di un menu hamburger offre una sensazione di semplicità visiva, attraente per qualsiasi designer.
E se crei un'alternativa a un menu di hamburger, deve in qualche modo risolvere i problemi relativi ad esso:
- Constabilità: Dovrebbe essere possibile trovare facilmente gli elementi di navigazione, in particolare quelli che utilizzano il prodotto per la prima volta.
- Coinvolgimento: L'interfaccia dovrebbe fornire prompt e Fidbeck, spiegando che l'utente può fare con il prodotto e quando è appropriato utilizzare determinate opportunità.
Complesso: Mobile.
Ho deciso di iniziare con il problema più difficile e controlla se la mia soluzione si adatterà disegni mobili. Dopo aver pensato alla massa di idee, sono arrivato alla conclusione che il menu Tab della scheda iOS è uno di le migliori decisioni per interfacce mobili. La massa di persone ha provato a fare lo scorrimento del pannello di tab (in modo che più di cinque opzioni) o aggiungere "altro" alla navigazione - qualcosa come una peluche, che ha una stanza in più che riempirà rapidamente la spazzatura. Inoltre, entrambe queste opzioni non soddisfano ancora il requisito principale - una chiarezza, la visibilità di tutte le possibilità è assente. Quindi cosa può essere creato con il menu Tab per risolverlo?
La mia decisione è combinare un hamburger e un pannello di schede a un singolo approccio. Il risultato è il pannello della scheda, che apre il set di opzioni per ciascuna voce di menu.
Ho creato un'applicazione di prova per valutare la produttività del team per illustrare il tuo approccio nel mondo degli affari. Usando questo metodo, l'utente può vedere chiaramente le funzioni di base e i metodi di utilizzo del prodotto. E invece di addormentarsi lista completa Le voci del menu nascoste dietro l'icona dell'hamburger, l'utente è mostrato diverse opzioni che appartengono alla scheda a cui ha fatto clic. Quindi la navigazione è più facile da capire e digerire, tutto ciò di cui hai bisogno è sempre a portata di mano, consente all'utente di vedere la gerarchia dell'applicazione.
Un altro vantaggio di un tale design è la possibilità di utilizzare notifiche contestuali. Nel caso di un menu di hamburger, hai solo un posto per visualizzare tali notifiche. Se si attende al layout con il pannello della scheda, è possibile produrre suggerimenti per l'utente in una qualsiasi delle voci del menu selezionate.
Naturalmente, la più grande vittoria di questo approccio è la scalabilità. Sì, sei ancora limitato a cinque categorie, ma è buono. Onestamente, penso che qualsiasi sito possa ospitare le tue opzioni in cinque categorie se il designer con la mente pensa la navigazione. Dopotutto, in ognuna di queste categorie, ci possono essere cinque o sei sottopunzione.
Risulta 30 possibili opzioni di navigazione senza la sensazione di sovraccarico per l'utente e senza l'occupazione dell'intero spazio dello schermo.
Applicazione a tablet.
Integrazione di un tale pannello di schede in tablet, come è, sembrava strano. Le tavolette sono molto più ampie e l'uso della stessa ui per dispositivi mobiliSembrava anche ridicolo come un adolescente nei vestiti, da cui era andato a lungo. Quindi sono andato in un altro modo. Invece di posizionare il pannello della scheda in basso, l'ho messo sul lato. Quindi è risultato più conveniente in termini di utilizzo dello spazio dello schermo e sembrava molto naturale. Inoltre, molti utenti tengono il tablet a lato, quindi questa è solo un'area di destinazione per toccare le dita.
E il desktop?
Preparati ... Menu retrattile. Tutto è vero - prova questo approccio all'interfaccia desktop e incontrerai una realtà indiscutibile: questa opzione non è affatto. Il menu retrattile è stato utilizzato per anni e quasi tutti gli utenti (anche tua mamma) sa come funziona. In questo, c'è un fascino di questo approccio - niente di nuovo.
Divulgazione completa
Non so come chiamare questa cosa. Deposito Raptor? O Taburger (scheda "Tab" + Burger)? Inoltre, non so se qualcuno ha creato una soluzione simile prima. Data la semplicità di un tale menu, non posso consentire l'idea di essere prima. So che diverse applicazioni utilizzano menu retrattili su alcune schede (ad esempio, TweetBot), ma di solito sono implementati come accesso veloce Funzioni per utenti avanzati e non per costruire una gerarchia di navigazione. Se hai un esempio, fammi sapere nei commenti.
Non importa se tale menu è nuovo o lungo inventato. È importante se è la soluzione migliore e più creativa per la navigazione rispetto al menu Hamburger. Smetti di parlare con te stesso "C'è un menu del genere in questo sito fantastico, significa che dovrebbe essere il migliore" o "tutti lo fa, ciò significa che correggi". Il design merita un approccio migliore e più attento.
Aggiornamenti
Collin Ebergardt ha notato su Twitter che la stessa ui è stata implementata in Windows Phone. Sono me stesso utente di Windows Telefono, ed è giusto. Sebbene questo tipo di interazione sia utilizzato in Windows Phone solo per l'opzione "Altro" nel pannello Tab.
James Perich ha portato un altro esempio su Twitter. Guarda l'Ahtabbarcontroller creato da Arthur Chemmer.
Semplici, funzionali, intuitivi e memorabili, come qualsiasi segnale stradale, l'icona di hamburger è diventata una vera tendenza l'anno scorso e un elemento integrale di qualsiasi sito web moderno e progettazione di applicazioni mobili.
Questa semplice icona mimica aspetto L'elenco dei menu è ideale per dispositivi con schermi piccoli e siti Web in cui il lato visivo è importante e la navigazione dovrebbe stare da parte. Questa è una soluzione molto efficiente e praticabile che soddisfa i requisiti del mondo moderno.
Come qualsiasi altro elemento di interfaccia, un'icona dell'hamburger può avere alcune deviazioni dall'opzione originale in base alle esigenze di ogni singolo progetto.
A seconda del progetto e del tema, l'icona dell'hamburger può assumere varie forme che completano il design o possono diventare la sua caratteristica indipendente e distintiva.
La raccolta di oggi comprende 20 diverse varianti di icone di hamburger.
L'icona dell'hamburger dei giochi DAVE del designer dà immediatamente molta energia calda. Lo stile del fumetto aggiunge giocosità e crea solo le emozioni più positive. Puoi usare un'icona del genere nella maggior parte delle interfacce illustrate moderne.
E Mat Walker ha sviluppato questa icona con le onde dell'oceano. Sentirà in modo eccellente in vari progetti dedicati al mare. Blu come il colore principale e il telaio intorno a rendere questa icona esclusiva.
L'implementazione pulita, luminosa e spiritosa consentirà a questo progetto di funzionare come icona di menu sui siti culinari. In questo caso, l'interfaccia riceverà un'evidenziazione di arte piacevole.
Designer offre 10. versioni interessanti Icone dell'hamburger, che sono fatte con un'anima. La serie copre vari tipi di hamburger: uno con formaggio, l'altro con pancetta, il terzo con la Turchia, e molti altri. Se hai un sito Web o app mobileRistorante di fast food, saranno sicuramente utili. Sono così visivamente interessanti che possano trovare un posto in quasi tutti gli argomenti.
E questo progetto rappresenta un hamburger realistico nel vettore. Il pulsante di chiusura è realizzato sotto forma di una patata fritta che prende la forma "x", con o senza salsa. Questa è una soluzione creativa che può aggiungere esotico nel design della pagina.
Sito ufficiale Guerre stellari Include un'icona interessante humburger, che gira. Ogni linea è divisa in due parti in modo da ottenere un vettore di riflessione di spade laser leggere. La soluzione rafforza l'impressione generale del sito e rafforza il marchio.
Il menu Burger da Peter Tauri è una versione perfettamente illustrata dell'icona. Caratteristica fondamentale Questa icona è scegliere i colori che imitano il kittet da taglio e carne.
La serie ha varie versioni di hamburger che sono implementate utilizzando lo stile di linea. Qui troverete un doppio hamburger, un hamburger con formaggio e insalata, un panino all'aperto e altri. Trovare soluzione perfetta Per la tua interfaccia pulita e piatta sarà facile da aggiungere picchi e "gusto".
L'artista dimostra tre versioni divertenti del pulsante: hamburger classico, cheeseburger e hot dog. La base di ognuna si trova uno o due colori, il che lo rende adatto per varie minuscole interfacce. Qui il colore crea l'aspetto corretto del sandwich.
L'artista offre una piccola animazione che include una sola icona di menu e diverse transizioni fluide che accompagnano la conversione al consueto "X" (pulsante di chiusura). Ci sono effetti speciali che sorgono quando si libra il mouse o la pressatura.
A differenza della maggior parte degli esempi sopra, questo campione dimostra manipolazioni abili con il peso, non il colore. Le linee superiori e inferiori del più audaci della media e creano la vista destra del "hamburger". L'artista ha affrontato con successo il compito.
Il menu Animazione dell'icona Ninja di Andrew Kowardakova differisce dalla maggior parte dei pulsanti-hamburger e offre una soluzione interessante ed eccezionale, con un sottotesto misterioso e attraente. Qui ogni linea è un ninja in vettoriale.
E questa icona è un'illustrazione di un hamburger con insalata e formaggio. Questo può aggiungere un evidenziatore a qualsiasi interfaccia noiosa. Eccellente soluzione per il sito del ristorante o del caffè.
Questo è un articolo in cui è possibile trovare argomenti interessanti sull'icona del menu alla moda. È contrassegnato da un'immagine che mostra le tre opzioni del pulsante Hamburger. Il primo è un'illustrazione piatta di prima classe, il secondo è l'icona dipinta di tre linee, e il terzo è la versione monocromatica del secondo campione è la scelta più popolare tra i designer.
La GIF mostra transizioni fluide tra lo stato iniziale di questa icona minimalista ed elegante e il suo stato finale. Dal momento che l'animazione inizia dalla linea di fondo, è più breve di altri.
Il menu dell'hamburger da Liam Spratlin sembra un insieme di segnalibri scolastici per i libri. Questa implementazione è audace e un po 'ruvida. Questa icona è immediatamente evidente, tuttavia, potrebbe essere difficile trovare un ambiente adatto per questo.
Finora, abbiamo considerato le icone separatamente, ma funzionano bene con le parole, specialmente quando questa parola "menu". Sebbene possa sembrare inutile, insieme sembrano squisitamente. Le linee ultra-sottili di 1 px di larghezza, che vengono utilizzate in questo caso, sono combinate come parte del puzzle.
Il progetto dimostra che l'icona dell'hamburger può sembrare più luminosa e attraente quando è imprigionata. Questa è un'ottima scelta per piccoli dispositiviQuando tale icona sarà conveniente per la navigazione sensoriale.
Il designer mostra un'icona semplice e liscia di tre linee, che è sottoposta a varie metamorfosi, girando in una croce o una freccia. L'animazione include diverse soluzioni che possono essere utili per tutti i progetti.
Risultati
A prima vista, può sembrare che tali scivolino come l'icona del menu non debba prestare molta attenzione. Ma se mostri un po 'di fantasia, puoi trasformarlo in una specie di clou della tua interfaccia. Soprattutto se gli sviluppatori iniziano a giocare con il suo significato e utilizzare tecniche artistiche per renderla più convenzionale e attirando l'attenzione.
