Non essere un quadrato, rompere la scatola noiosa e provare un cerchio per le dimensioni. Oggi costruiremo un menu di navigazione circolare che gira su diversi punti mentre l'utente si libra sopra un'ancora.
Lungo il percorso dovremo superare diversi ostacoli come il modo in cui strutturare il nostro HTML per favorire un hover remoto e come posizionare tutti gli elementi giusto in modo che tutto funzioni. È una sfida divertente e c'è molto da imparare, iniziamo!
Avvia demo - Scarica file
Passaggio 1: HTML strutturale
Prima di scrivere un singolo carattere di HTML, dobbiamo capire la struttura di ciò che stiamo costruendo. Per questo, possiamo rivolgerci a Photoshop e fare uno schizzo di base su come vogliamo che il menu appaia. Ecco cosa mi è venuto in mente:
Fondamentalmente, ognuno dei rettangoli in alto è legato ad uno dei quattro piccoli cerchi all'interno del grande cerchio. Quando un rettangolo viene passato sopra, il suo piccolo cerchio corrispondente ruoterà fino alla cima del menu. Ancora una volta, stiamo facendo uso del concetto di "telecomando"? passa il mouse perché l'utente interagisce con un'area e ne influenza un'altra.
Ogni volta che provo a tirare fuori un hover remoto, mi ci vogliono alcuni tentativi per ottenere la struttura giusta. Ciò è dovuto al modo in cui funzionano i selettori CSS e, in particolare, al modo in cui funziona la pseudo classe hover. Considera quanto segue:
Diciamo che abbiamo messo questa struttura in posizione con l'idea che volevamo un passaggio del mouse sopra l'ancora per cambiare il colore del paragrafo. Se hai un'idea di base su come funzionano gli hover remoti, potresti trovare alcuni CSS come questo:
A quanto pare, semplicemente non funziona. Nel nostro selettore CSS, dobbiamo legare l'ancoraggio che si trova al di sopra del paragrafo su cui agire, ma i nostri elementi si trovano in due div completamente separati. Non c'è un modo semplice per salire così in alto e attraverso l'albero del DOM.
Quindi cosa facciamo? La risposta sta nel ristrutturare il nostro HTML. Questa volta getteremo i due elementi sullo stesso livello dell'albero.
Ora il nostro paragrafo è un fratello della nostra ancora, il che significa che abbiamo un modo chiaro per legarli insieme nel nostro CSS. Ecco come funziona:
Questa volta, stiamo dicendo al browser di attivare uno spostamento di colore su qualsiasi paragrafo che è il fratello immediato di un'ancora su cui si sta librando.
Applicazione
Se applichiamo questa conoscenza al nostro scenario, possiamo creare una struttura che funzioni. Inizia creando tre div: wrapper, menu e circle. Nido menu all'interno di involucro e cerchio all'interno di menu.
All'interno del menu div, posiziona quattro ancore, ognuna con una classe unica. All'interno del div circle, posiziona una lista non ordinata contenente i numeri da uno a quattro.
Potrebbe anche essere un po 'di confusione su come tutti questi pezzi siano collegati al nostro schizzo precedente, quindi aggiorniamolo con alcuni suggerimenti visivi per darti un'idea di cosa fa tutto.
Passaggio 2: CSS wrapper
Il codice sopra rappresenta tutto l'HTML che ci servirà per questo piccolo progetto. Il resto del nostro lavoro è tutto CSS. Per iniziare, definiamo un codice di invio e posizionamento di base:
Non c'è molto di cui essere confusi, stiamo semplicemente abbozzando il nostro involucro. Si noti che il -webkit-controfaccia visibilità bit è di prevenire un bug che faccia sfarfallare Webkit sulle transizioni CSS.
Passaggio 3: Circle CSS
Ora passeremo alla codifica di quel grande cerchio. Creare una circonferenza in CSS è piuttosto semplice, ma assicurati che l'altezza e la larghezza siano uguali e che il raggio del bordo sia impostato almeno al 50%. Tutto il resto qui aiuta solo a posizionare tutto bene.
Per rendere il cerchio un po 'più elaborato, aggiungiamo un'ombra inserita. Infine, lanciamo una transizione in modo che il cerchio animi la rotazione che avviene in seguito.
Se diamo un'occhiata alla nostra anteprima dal vivo, dovremmo avere un bel cerchio grande e alcuni altri vari elementi sparsi che vedremo in seguito.
Passaggio 4: Menu CSS
Per il nostro prossimo trucco, modificheremo le voci del menu. Per fare ciò, scegli come target le ancore, aggiungi margine e padding, imposta la larghezza e il colore, elimina la decorazione del testo e modifica il font. Quindi scegli lo stato di passaggio del mouse e aggiungi un colore di sfondo. Ecco il codice:
Ora se verifichiamo la nostra anteprima dal vivo, i link nel nostro menu appariranno molto più belli. Gli articoli della lista sono ancora tutti fuori gioco, quindi attaccheremo quelli successivi.
Passaggio 5: Little Circle CSS
Per creare le piccole cerchie, per prima cosa prendiamo di mira gli elementi della lista e li impostiamo in modo molto simile al grande cerchio: rendi uguali l'altezza e la larghezza e imposta il raggio del bordo al 50%. Assicurati anche di cancellare i punti elenco, impostare lo sfondo su bianco e modellare il font come vedi sotto.
Ecco la parte difficile. Sopra, abbiamo assegnato a ciascuno dei cerchi il posizionamento assoluto, quindi ora dobbiamo metterli al loro posto. Possiamo indirizzare ogni singolo cerchio con nth-child, quindi utilizzare superiore e sinistra per spingerli dove vogliamo. Infine, vogliamo fare in modo che la parte superiore di ciascun numero sia rivolta verso il bordo esterno del cerchio grande in modo che quando l'intero elemento ruota, il numero in alto è sempre rivolto verso l'alto. Lo facciamo usando una trasformazione CSS.
Se diamo un'occhiata alla nostra anteprima ora, è tutto molto bello. C'è una cosa che non è proprio giusta?
Passaggio 6: Inner Circle CSS
Il nostro concetto originale non era solo un grande cerchio, c'era anche un cerchio interno centrato. Possiamo eliminarlo senza alcun markup HTML extra usando il nostro vecchio amico prima. Crea un elemento prima involucro, imposta il contenuto su? DS ?, crea un cerchio come gli altri (130 px questa volta), allinea e modifica il testo, spostalo in alto con z-index e spostalo in posizione con posizionamento assoluto.
Sembra molto meglio! Con questo, il nostro stile visivo è completamente finito. Ora tutto ciò che resta da fare è dare vita a questo pollone.
Passaggio 7: Hover Circle CSS
Per far girare il nostro menu, dobbiamo usare il nostro trucco hover remoto combinato con una trasformazione CSS. Quando l'utente passa su una delle voci del menu principale, l'intero elemento del cerchio girerà in modo che il numero corrispondente si trovi in alto.
La parte più difficile di questo è capire il selezionatore. Iniziamo dal livello più alto che contiene sia il div circle che le voci del menu. Questo è ovviamente il menu div. Quindi restringiamo le opzioni fino a uno specifico figlio del menu e lo indirizziamo al passaggio del mouse. Infine, diciamo al browser che vogliamo agire qualunque fratello di quell'elemento viene sospeso con una classe di? cerchio.? Ecco come appare in pratica:
È una bestia di un selezionatore, ma ha fatto il lavoro ed è abbastanza buono per il nostro divertente piccolo esperimento. Ora, dal momento che stiamo prendendo di mira il secondo cerchio qui, abbiamo bisogno di ruotare l'intero div di 90 gradi. Inoltre, dato che vogliamo andare in senso antiorario, il numero sarà negativo:
Questo è tutto ciò che c'è da fare, ora usiamo semplicemente questa tecnica attraverso tutti e quattro i cerchi. Iniziamo con una rotazione di 0, quindi -90, -180 e infine, -270.
Guarda!
Congratulazioni, hai finito! Ora è il momento di controllare i frutti del nostro duro lavoro. Ecco una demo.
demo: Clicca qui per il lancio.
Come sempre, grazie mille per la lettura e sentiti libero di lasciare un commento qui sotto per farmi sapere cosa ne pensi. Ci sono diversi modi in cui puoi affrontare questo progetto, come lo avresti fatto in modo diverso?