Kako stvoriti kartično navigaciju s CSS i bez slika

Navigacija na web stranicama je oblik popisa, a navigacija s karticama nalik je horizontalnom popisu. Praktično je kreirati horizontalnu navigaciju s karticama pomoću CSS-a, ali CSS 3 nam daje još nekoliko alata kako bi ih izgledali još ljepše.

Ovaj vodič će vas odvesti kroz HTML i CSS potrebne za stvaranje CSS kartice izbornika. Kliknite tu vezu da biste vidjeli kako će izgledati.

Ovaj izbornik s karticama koristinema slika, samo HTML i CSS 2 i CSS 3. Može se jednostavno urediti za dodavanje više kartica ili promjenu teksta u njima.

Podrška pregledniku

Ovaj izbornik kartice će raditisvi glavni preglednici, Internet Explorer neće prikazivati ​​zaobljene kutove, ali inače će prikazivati ​​kartice kao što su Firefox, Safari, Opera i Chrome.

Napišite popis izbornika

Svi navigacijski izbornici i kartice zapravo su samo neuredan popis. Dakle, prva stvar koju želite učiniti je napisati neuredan popis veza do mjesta na kojem želite krenuti s karticama.

Ovaj vodič pretpostavlja da svoj HTML unosite u uređivač teksta i da znate gdje postaviti HTML za izbornik na web stranici.

Napišite svoj neuredan popis ovako:

• class = "tablist">
  • CSS 3
  • id = "struja"> Kartice
  • Za
  • izbornici
  Primijetit ćete da kod poziva dvije stvari: class = "tablist" i id = "struja". Prvi je potreban, Ako ne stavite tablist klase na vašem neurednom popisu, kartice neće funkcionirati. Druga je opcija. Stavi id = "struja" na kartici koju želite označiti na toj stranici. To obično koristimo za označavanje stranice na kojoj se nalazimo, ali možete ga koristiti da biste istaknuli najvažniju karticu. Ili ga možete potpuno ukloniti.

Počnite uređivati ​​svoj stilski list

Možete upotrijebiti ili vanjski stilski stil ili interni stilski list. Stranica izbornika uzorka koristi interni stilski list u dokumenta.

Prvo ćemo označiti UL

Ovo je mjesto gdje koristimo klasutablist u HTML-u. Umjesto oblikovanja UL oznake, koja bi oblikovala sve neuređene popise na vašoj stranici, trebali biste stilirati samo UL-razred.tablist Stoga bi prvi unos u vašem CSS trebao biti:

.tablist {}

Volimo staviti završetak kovrčavog držača (}) ispred vremena, tako da ga ne zaboravimo kasnije.

Dok koristimo neodređenu oznaku popisa za popis izbornika kartica, ali ne želimo da se metke ili brojevi kreću. Dakle, prvi stil koji trebate dodati jest.Lista stilu: none; To govori pregledniku da je popis, bez popisa, bez prethodno određenih stilova (poput metaka ili brojeva).

Zatim možete postaviti visinu popisa da odgovara prostoru kojem želite ispuniti. Odabrali smo 2em za našu visinu, jer to je dvostruko veća od standardne veličine fonta i daje oko pola em ispod i ispod teksta kartice.visina: 2em; Ali možete postaviti svoju širinu na željenu veličinu. UL oznake automatski će zauzimati 100% širine, pa ako ne želite da bude manji od trenutnog spremnika, možete ostaviti širinu.

Konačno, ako vaš glavni stilski list nema unaprijed postavljene oznake za oznake UL i OL, željeli biste ih staviti. To znači da biste trebali isključiti granice, margine i padove na UL. padding: 0; margin: 0; granica: none; Ako ste već resetirajte UL oznaku, možete promijeniti margine, padding ili granicu na nešto što odgovara vašem dizajnu.

Vaš završni razred trebao bi izgledati ovako:

.tablist {list-style: none; visina: 2em; padding: 0; margin: 0; granica: none; }

Uređivanje stavki LI popisa

Nakon što postavite svoj neuredan popis, trebate oblikovati LI oznake unutar nje. U suprotnom, oni će djelovati kao standardni popis i svaki se korak premjestiti na sljedeći red bez ispravnog postavljanja kartica.

Najprije postavite svojstvo stila:

.tablist li {}

Zatim želite plutajuće kartice tako da se podudaraju s vodoravnom ravninom. float: lijevo;

I ne zaboravite dodati neke margine između kartica pa se ne spajaju zajedno. margin-right: 0.13em;

Vaši stilovi bi trebali izgledati ovako:

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

Izrada kartica izgledaju kao kartice s CSS-om 3

Da biste napravili veći dio teškog podizanja u ovom alatu za stil, ciljaju se veze unutar neorganiziranog popisa. Preglednici prepoznaju da veze čine više na web stranici od ostalih oznaka, tako da je lakše dobiti starije preglednike kako bi se pridržavali stvari kao što su stanje lebdeće ako ih priključite na sidrenu oznaku (veze). Zato najprije napišite svojstva stila:

.tablist li a {} .tablist li a: lebdjeti {}

Budući da se te kartice trebaju ponašati kao kartice u aplikaciji, želite kliknuti cijelo područje kartice, a ne samo povezani tekst. Da biste to učinili, morate pretvoriti oznaku A iz normalne "inline" države u blokni element. Prikaz: blok; (Ako vas zanima saznati više o razlici, pročitajte Blokiraj i Inline elemente.)

Zatim, jednostavan način za prisiljavanje vaših kartica da budu simetrični jedni s drugima, ali ipak savijanje da odgovara širini teksta je da pravo i lijevo padding isto. Koristili smo stenografski imetak za postavljanje vrha i dna na 0, a desno i lijevo na 1em. padding: 0 1em;

Također smo odlučili ukloniti vezu podcrtava, tako da kartice izgledaju manje poput veza.No, ako bi vas publika mogla zbuniti, izostavite ovu liniju. Link-decoration: none;

Stavljanjem tanke granice oko jezičaka čini ih izgleda poput kartica. Koristili smo graničnu imovinu kako bismo granicu postavili na sve četiri strane granica: 0.06em solid # 000; A zatim je upotrijebio entitet na rubu pri dnu da biste je uklonili s dna. granica dna: 0;

Zatim smo napravili neke prilagodbe fontu, boji i bojama pozadine kartica. Postavite ih na stilove koji odgovaraju vašoj web-lokaciji. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; Boja: # 000; Pozadina boja: #ccc;

Svi gore navedeni stilovi trebali bi se uključiti u izbornik.tablist li a, pravilo tako da oni općenito utječu na sidrene oznake. Zatim, da bi se kartice učinile klikljivijima, dodajte nekoliko pravila države.zdržati li: zadržite pokazivač miša.

Volimo promijeniti boju teksta i pozadine kako bi tabulator nastao kada mišem nad njom. Pozadina: # 3cf; boja: #fff;

A još smo podsjetili na preglednike da želimo da veza ne bude podcrtana. text-decoration: none; Druga uobičajena metoda je ponovno uključivanje podcrta kada miša preko kartice. Ako to želite, promijenite ga text-decoration: underline;

Ali gdje je CSS 3?

Ako ste obratili pozornost, vjerojatno ste primijetili da u stilskom listu nije bilo CSS 3 stilova. To ima prednost u radu u bilo kojem modernom pregledniku, uključujući Internet Explorer. No, ne čini kartice izgledaju kao ništa više od kvadrata. Dodavanjem graničnog radijusa CSS 3 poziva u stilu (i pridružene su pozive vezane uz preglednik) možete zaokružiti rubove kako biste izgledali slično karticama na mapi manila.

Stilovi koje trebate dodati u .tablist li a pravilo su: -webkit-border-top-pravo-radijus: 0.50em; -webkit granica-top-lijeva radijus: 0.50em; -moz nog-radijusa-topright: 0.50em; -moz nog-radijusa-topleft: 0.50em; border-top-pravo-radijus: 0.50em; border-top-lijevo-radius: 0.50em;

Ovo su zadnja pravila pravila koja smo napisali:

.stabil li a {prikaz: blok; padding: 0 1em; text-decoration: none; granica: 0.06em solid # 000; granica dna: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; Boja: # 000; Pozadina boja: #ccc; / * CSS 3 elementa * / webkit-border-top-right-radius: 0.50em; -webkit granica-top-lijeva radijus: 0.50em; -moz nog-radijusa-topright: 0.50em; -moz nog-radijusa-topleft: 0.50em; border-top-pravo-radijus: 0.50em; border-top-lijevo-radius: 0.50em; }. stablo li a: lebdjeti {pozadina: # 3cf; boja: #fff; text-decoration: none; }

Uz ove stilove imate izbornik na karticama koji funkcionira u svim glavnim preglednicima i izgleda kao lijepo otisnute kartice u preglednicima koji zadovoljavaju CSS 3. Sljedeća stranica vam daje još jednu opciju koju možete upotrijebiti za odijevanje još više.

Označite trenutnu karticu

U HTML-u koji smo stvorili, UL je imao jedan element popisa s ID-om. To vam omogućuje da jedan LI drugačiji stil od ostatka. Najčešća situacija je da se trenutna kartica istakne na neki način. Drugi način da to mislite je da želite izrezati kartice koje nisu žive. Zatim promijenite gdje je id na različitim stranicama.

Stiljemo i oznaku #current A, kao i #current A: hover sta, tako da su oboje malo drugačiji. Možete promijeniti boju, boju pozadine, čak visinu, širinu i padding tog elementa. Učinite što god promjena ima smisla u vašem dizajnu.

.tablist li # current a {background-color: # 777; boja: #fff; } .tablist li # current a: lebdjeti {pozadina: # 39C; }

I gotovi ste! Upravo ste izradili izbornik na karti za svoju web stranicu.