[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.16″ global_colors_info=”{}” theme_builder_area=”et_body_layout”][et_pb_row admin_label=”row” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}” theme_builder_area=”et_body_layout”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”et_body_layout”][et_pb_text _builder_version=”4.18.0″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”et_body_layout” sticky_enabled=”0″]
Quando si tratta di navigazione sul sito Web, la vecchia regola pratica è che il contenuto non dovrebbe essere a più di un clic o due di distanza. Si tratta di garantire che gli utenti possano trovare ciò di cui hanno bisogno senza dover fare i salti mortali.
Ma più contenuti hai, più difficile diventa organizzare la navigazione. I menu a discesa lunghi o quelli con più livelli nidificati possono essere difficili da usare. È più probabile che inviino potenziali clienti a un altro sito piuttosto che invogliarli a esplorare il tuo.
È qui che un mega menu ben progettato può fare la differenza. Forniscono un modo per organizzare ordinatamente le voci di menu e consentono agli utenti di trovare esattamente quello che stanno cercando.
Sono anche incredibilmente flessibili. Oltre al testo, possono ospitare qualsiasi cosa, dalle immagini a un’interfaccia utente di ricerca, il tutto utilizzando le tecniche di layout CSS standard.
Oggi condivideremo 8 frammenti CSS e JavaScript per la creazione di mega menu. Troverai di tutto, dalla semplice navigazione basata su testo a interfacce utente ricche di stile. Eccoci qui!
Sebbene l’animazione possa essere fantastica, può anche intralciare attività di base come la navigazione. Questo frammento fa un ottimo lavoro nell’evitare quella trappola andando a schermo intero. Fare clic sull’icona ” hamburger ” e viene visualizzato un menu ampio e di facile lettura. Un po’ di serenità per migliorare l’esperienza utente (UX).
A volte meno è davvero di più in un mega menu. Questo semplice frammento di testo è costruito interamente utilizzando CSS. Nessun JavaScript gonfio o effetti speciali non necessari. Solo una solida base per l’organizzazione dei contenuti.
Clean Foundation Mega Menu di Endre CZÖVEK
Se stai lavorando con un framework CSS come Foundation, probabilmente hai un vantaggio nella creazione di un mega menu. In questo esempio, l’autore ha utilizzato le funzionalità integrate del framework per creare un’estetica pulita. L’aggiunta di icone e immagini rende questo menu un gioco da ragazzi da navigare e un piacere da visualizzare.
Menu Mega a colonne multiple di Reza Baharvand
Questo mega menu altamente stilizzato offre molti stimoli visivi. Attira anche la tua attenzione con sottomenu che si estendono per miglia che includono più colonne e immagini. Si adatta bene sui dispositivi mobili, soddisfacendo coloro che sono abituati a lunghe pergamene.
Menù sexy Flexy Mega di Mike Torosian
C’è molto amore in questo frammento. Il menu è organizzato, attraente e offre quel tanto che basta per impressionare gli utenti. Combina l’animazione SVG e jQuery per creare un’interfaccia utente molto intuitiva.
Menu Mega verticale con CSS puro di Syakir Rahman
I mega menu non sono solo affari orizzontali e questo frammento è qui con la prova. Costruito con puro CSS, presenta un’animazione di rivelazione liscia e un layout pulito. Questa potrebbe essere un’ottima soluzione per i negozi di eCommerce con troppe categorie di prodotti da inserire in una barra di navigazione tradizionale.
Basato su Bootstrap, in questo esempio troverai sia menu a discesa che mega menu. La combinazione di utilizzo intelligente del colore (in particolare il bordo blu nella parte superiore di ogni sottomenu) e layout accattivanti funziona bene qui. Si traduce in un’esperienza di navigazione complessivamente piacevole.
Menu diagonale Mega di Tim Normington
Questo frammento ribalta il concetto di mega menu, in senso positivo! Inizia con un menu di hamburger triangolare che, quando viene cliccato, apre la navigazione della barra laterale compatta. L’animazione e le icone sono molto divertenti e tutto è ben organizzato. Inoltre, c’è spazio per la crescita, poiché è possibile aggiungere facilmente nuove file.
A giudicare dai frammenti di cui sopra, sembra che ci siano infinite possibilità per lo stile e l’implementazione di mega menu. C’è qualcosa per ogni esigenza. Sia che tu abbia dozzine di categorie di prodotti o desideri visualizzare un elenco ordinato di contenuti nidificati, puoi ottenerlo con un mega menu.
Inoltre, non devi necessariamente fare affidamento su fantasiose librerie JavaScript per la funzionalità. I CSS possono gestire quasi tutte le attività. Questo aiuta a mantenere i menu efficienti e accessibili.
[/et_pb_text][et_pb_text _builder_version=”4.18.0″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”et_body_layout” sticky_enabled=”0″]
Se vuoi approfondire o lavorare sulla seo | Creare un sito web | Gestire i tuoi social | contattaci sul nostro sito web hubcomunicazione oppure al numero 3287225430.
Ti possono interessare:
- Google posticipa la fine dei cookie terzi
- Google content Update
- 6 font gratuiti da valutare
- Strumenti utili per web designer
- Che cosa è la mail marketing
- Che cosa è il video content marketing
- Che cos’è il content marketing
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]