Come creare una navigazione a schede con CSS e nessuna immagine

La navigazione sulle pagine Web è una forma di elenco e la navigazione a schede è come una lista orizzontale. È abbastanza facile creare una navigazione orizzontale a schede con i CSS, ma CSS 3 ci dà alcuni altri strumenti per renderli ancora più belli.

Questo tutorial ti guiderà attraverso l'HTML e il CSS necessari per creare un menu a schede CSS. Clicca su quel link per vedere come apparirà.

Questo menu a schede utilizzaniente immagini, solo HTML e CSS 2 e CSS 3. Può essere facilmente modificato per aggiungere altre schede o modificare il testo al loro interno.

Supporto del browser

Questo menu a schede funzioneràtutti i principali browser. Internet Explorer non mostrerà gli angoli arrotondati, ma in caso contrario mostrerà schede come Firefox, Safari, Opera e Chrome.

Scrivi la tua lista dei menu

Tutti i menu e le schede di navigazione sono in realtà solo una lista non ordinata. Quindi la prima cosa che vuoi fare è scrivere una lista non ordinata di link dove vuoi che la tua navigazione a schede vada.

Questo tutorial presume che tu stia scrivendo il tuo HTML in un editor di testo e che tu sappia dove posizionare l'HTML per il tuo menu sulla tua pagina web.

Scrivi il tuo elenco non ordinato in questo modo:

• class = "tablist">
  • CSS 3
  • id = "current"> Schede
  • Per
  • menu
  Noterai che il codice richiama due cose: class = "tablist" e id = "corrente". Il primo è necessario. Se non metti il tablist classe sul tuo elenco non ordinato, le schede non funzionerà. Il secondo è facoltativo. Metti il id = "current" su qualunque scheda desideri essere evidenziata in quella pagina. Solitamente lo usiamo per evidenziare la pagina in cui ci troviamo, ma puoi usarla per evidenziare la scheda più importante. O puoi rimuoverlo completamente.

Iniziare a modificare il tuo foglio di stile

Puoi usare un foglio di stile esterno o un foglio di stile interno. La pagina del menu di esempio utilizza un foglio di stile interno nel del documento.

Per prima cosa modelleremo l'UL stesso

Questo è dove usiamo la classetablist .nel codice HTML. Piuttosto che disegnare il tag UL, che modificherebbe tutti gli elenchi non ordinati sulla tua pagina, dovresti applicare solo la classe UL.tablist Quindi la prima voce nel tuo CSS dovrebbe essere:

.tablist {}

Ci piace inserire la parentesi graffa finale (}) prima del tempo, quindi non lo dimenticheremo più tardi.

Mentre utilizziamo un tag elenco non ordinato per l'elenco dei menu a schede, ma non vogliamo inserire alcun numero di proiettili o numeri. Pertanto, il primo stile da aggiungere è.list-style: none; Questo dice al browser che mentre è una lista, è una lista senza stili predeterminati (come punti elenco o numeri).

Quindi, puoi impostare l'altezza della tua lista in modo che corrisponda allo spazio che vuoi riempire. Abbiamo scelto 2em per la nostra altezza, poiché questo è il doppio della dimensione del carattere standard e fornisce circa mezzo em sopra e sotto il testo della scheda.altezza: 2em; Ma puoi impostare la larghezza in base alle dimensioni che desideri. I tag UL prenderanno automaticamente il 100% della larghezza, quindi, a meno che tu non voglia che sia più piccolo del contenitore corrente, puoi lasciare la larghezza fuori.

Infine, se il tuo foglio di stile principale non ha preimpostazioni per i tag UL e OL, ti consigliamo di inserirli. Ciò significa che devi disattivare i bordi, i margini e il riempimento sul tuo UL. padding: 0; margin: 0; confine: nessuno; Se hai già ripristinato il tag UL, puoi modificare i margini, il riempimento o il bordo in base a qualcosa che si adatta al tuo design.

La tua classe .tablist finale dovrebbe assomigliare a questa:

.tablist {list-style: none; altezza: 2em; padding: 0; margin: 0; confine: nessuno; }

Modifica degli elementi dell'elenco LI

Una volta che hai stilizzato la tua lista non ordinata, devi modellare i tag LI al suo interno. In caso contrario, si comportano come un elenco standard e passano alla riga successiva senza posizionare correttamente le schede.

Innanzitutto, imposta la tua proprietà di stile:

.tablist li {}

Quindi vuoi far fluttuare le tue schede in modo che si allineano sul piano orizzontale. float: sinistra;

E non dimenticare di aggiungere un margine tra le schede, in modo che non si uniscano insieme. margin-right: 0.13em;

I tuoi stili li dovrebbero assomigliare a questo:

.tablist li {float: left; margin-right: 0.13em; }

Rendere le schede come schede con CSS 3

Per fare la maggior parte del lavoro pesante in questo foglio di stile, stiamo prendendo di mira i collegamenti all'interno dell'elenco non ordinato. I browser riconoscono che i collegamenti fanno di più su una pagina web rispetto ad altri tag, quindi è più facile far sì che i browser più vecchi si conformino a cose come gli stati di passaggio del mouse se li si collega al tag di ancoraggio (link). Quindi, per prima cosa scrivi le tue proprietà di stile:

.tablist li a {} .tablist li a: hover {}

Poiché queste schede dovrebbero agire come schede in un'applicazione, è necessario che l'intera area della scheda sia selezionabile, non solo il testo collegato. Per fare ciò, devi convertire il tag A dal suo normale stato "inline" in un elemento di blocco. blocco di visualizzazione; (Se sei interessato a saperne di più sulla differenza, leggi Elementi a livello di blocco e in linea.)

Quindi, un modo semplice per forzare le schede a essere simmetriche l'una con l'altra, ma comunque flettere per adattarsi alla larghezza del testo è quello di rendere lo stesso padding destro e sinistro. Abbiamo usato la proprietà di stenografia padding per impostare la parte superiore e inferiore a 0 e la destra e sinistra a 1em. riempimento: 0 1em;

Abbiamo anche scelto di rimuovere le sottolineature del collegamento, in modo che le schede sembrino meno simili ai link.Ma se il tuo pubblico potrebbe essere confuso da questo, tralascia questa linea. link-decoration: none;

Mettendo un bordo sottile attorno alle linguette, le assomiglia a delle linguette. Abbiamo usato la proprietà di stenografia del confine per mettere il bordo attorno a tutti e quattro i lati border: 0.06em solid # 000; E poi ha usato la proprietà border-bottom per rimuoverlo dal fondo. border-bottom: 0;

Quindi abbiamo apportato alcune modifiche al carattere, al colore e al colore di sfondo delle schede. Impostali sugli stili che corrispondono al tuo sito. font: bold 0.88em / 2em arial, ginevra, helvetica, sans-serif; color: # 000; background-color: #ccc;

Tutti gli stili di cui sopra dovrebbero andare nel selettore.tablist li a, la regola in modo che influiscano sui tag di ancoraggio in generale. Quindi per rendere le schede più cliccabili, è necessario aggiungere alcune regole di stato.tablist li a: hover.

Ci piace cambiare il colore del testo e dello sfondo per far sì che la scheda si apra quando passi il mouse su di essa. background: # 3CF; color: #fff;

E abbiamo incluso un altro promemoria per i browser che vogliamo che il link rimanga non sottolineato. text-decoration: none; Un altro metodo comune consiste nel riattivare la sottolineatura quando si passa il mouse sulla scheda. Se vuoi farlo, cambialo in text-decoration: underline;

Ma dov'è il CSS 3?

Se hai prestato attenzione, probabilmente hai notato che non ci sono stati stili CSS 3 usati nel foglio di stile. Questo ha il vantaggio di funzionare in qualsiasi browser moderno, incluso Internet Explorer. Ma non fa sembrare le schede qualcosa di più delle scatole quadrate. Aggiungendo un call-radius call in stile CSS 3 (ed è associato a chiamate specifiche del browser) è possibile arrotondare i bordi, per apparire più come schede in una cartella manila.

Gli stili che dovresti aggiungere al .tablist li a regola sono: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;

Queste sono le regole di stile finali che abbiamo scritto:

.tablist li a {display: block; riempimento: 0 1em; text-decoration: none; border: 0.06em solid # 000; border-bottom: 0; font: bold 0.88em / 2em arial, ginevra, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elementi * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; color: #fff; text-decoration: none; }

Con questi stili, hai un menu a schede che funziona in tutti i principali browser e sembra una bella scheda stampata nei browser compatibili con CSS 3. La prossima pagina ti offre un'altra opzione che puoi usare per vestirla ancora di più.

Evidenzia la scheda corrente

Nell'HTML che abbiamo creato, l'UL aveva un elemento di lista con un ID. Questo ti permette di dare a una LI uno stile diverso dal resto. La situazione più comune è di fare in modo che la scheda attuale risulti in qualche modo. Un altro modo per pensare a questo è che vuoi rendere più grigie le schede che non sono attive. Quindi si modifica dove si trova l'id nelle diverse pagine.

Modifichiamo sia il tag #current A sia il #current A: hover sta in modo che entrambi siano leggermente diversi. Puoi cambiare il colore, il colore dello sfondo, anche l'altezza, la larghezza e il riempimento di quell'elemento. Apporta le modifiche necessarie al tuo design.

.tablist li # current a {background-color: # 777; colore: #fff; } .tablist li # corrente a: hover {background: # 39C; }

E hai finito! Hai appena creato un menu a schede per il tuo sito web.