01 of 06
Kumaha Jieun Tabbed Napigasi kalawan CSS jeung No Gambar
Navigasi dina kaca web mangrupakeun bentuk daptar, tur navigasi tabbed téh kawas daptar horizontal. Ieu cukup gampang pikeun nyieun navigasi tabbed horizontal kalawan CSS, tapi CSS 3 méré urang sababaraha langkung parabot nyieun éta kasampak malah nicer.
tutorial ieu bakal butuh anjeun ngaliwatan HTML jeung CSS diperlukeun pikeun nyieun CSS a tabbed menu. Klik link nu ningali kumaha eta bakal béda.
Menu tabbed Ieu migunakeun euweuh gambar, ngan HTML jeung CSS 2 na CSS 3. Ieu bisa gampang diédit pikeun nambahkeun leuwih tab atawa ngarobah téks dina aranjeunna.
browser Rojongan
Menu tab ieu bakal dianggo dina sakabéh panyungsi utama. Internét ngajajah moal nembongkeun juru rounded, tapi disebutkeun, eta baris némbongkeun tab ngan kawas Firefox, Safari, Opera, jeung Google Chrome.
02 of 06
Tulis Daptar Menu anjeun
Kabéh ménu navigasi sarta tab nu bener euy hiji daptar unordered. Ku kituna hal kahiji rék ngalakukeun anu nulis hiji daptar unordered tumbu ka mana rék navigasi tabbed anjeun pikeun balik.
tutorial ieu asumsina nu nuju nulis HTML anjeun dina pangropéa téksu jeung nu nyaho dimana nempatkeun HTML pikeun menu Anjeun dina kaca web Anjeun.
Nulis daftar unordered anjeun jiga kieu:
- kelas = "tablist">
- CSS 3
- id = "ayeuna"> Tab
- keur
- ménu
Anjeun bakal aya bewara nu kode nyaéta panggero kaluar dua hal: kelas = "tablist" na id = "ayeuna". Kahiji anu diperlukeun. Mun anjeun teu nyimpen kelas tablist dina daptar unordered anjeun, tab moal jalan. kadua nyaeta pilihan. Nunda id = "ayeuna" dina whichever tab remen jadi disorot di kaca éta. Kuring biasana ngagunakeun ieu nyorot kaca tangka simkuring ngaraos on, tapi Anjeun bisa make eta nyorot tab pangpentingna. Atawa anjeun bisa ngaleupaskeun sagemblengna.
03 of 06
Mimitian ngédit Style lambaran anjeun
Anjeun tiasa make hiji lambar gaya éksternal atawa hiji lembar gaya internal . Kaca menu sampel migunakeun hiji lambar gaya internal dina
Munggaran Ieu gé gaya nu UL sorangan
Ieu tempat kami nganggo tablist kelas .in HTML nu. Tinimbang styling tag UL, anu bakal gaya sadayana béréndélan unordered dina kaca, anjeun kedah gaya mung kelas UL. tablist kituna entri pertama di CSS Anjeun kedah:
.tablist {}Kuring resep pikeun nyimpen dina pananggeuy Curly tungtung (}) dihareupeun waktu, jadi kuring teu poho engké.
Bari urang nuju ngagunakeun hiji daptar tag unordered keur daftar menu tab, tapi urang teu hayang sagala pélor atawa nomer creeping di. Jadi gaya mimitina anjeun kudu nambahan nyaeta. Daptar-gaya: taya; Ieu ngabejaan browser nu bari éta daptar a, éta daptar kalawan henteu pre-ditangtukeun gaya (kawas pélor atawa angka).
Lajeng, Anjeun tiasa nyetel jangkungna daftar anjeun pikeun cocog spasi rék ka eusian. Kuring milih 2em pikeun jangkungna abdi, sakumaha éta ganda ukuran font baku, jeung mere kira satengah em luhur jeung handap teks tab éta. jangkungna: 2em; Tapi Anjeun tiasa nyetel lebar anjeun pikeun ukuran naon maneh dipilampah. tag UL otomatis bakal nyandak up 100% lebar, jadi iwal mun hoyong ka jadi leuwih leutik batan wadah ayeuna, anjeun tiasa ninggalkeun lebar kaluar.
Tungtungna, upami anjeun lambar master gaya teu gaduh prasetél pikeun UL sarta tag OL, anjeun bakal rék nempatkeun aranjeunna dina. Ieu ngandung harti yén anjeun kedah mareuman wates, margins, sarta padding on UL Anjeun. padding: 0; margin: 0; wates: taya; Mun anjeun geus geus ngareset tag UL, Anjeun bisa ngarobah margins, padding, atawa wates pikeun hal nu fits kalayan design Anjeun.
final kelas .tablist Anjeun kedah kasampak kawas kieu:
.tablist {Daptar-gaya: taya; jangkungna: 2em; padding: 0; margin: 0; wates: taya; }04 of 06
Ngédit éta Li Daptar Item
Sanggeus anjeun styled daptar unordered, anjeun kudu gaya tag Li jero eta. Upami teu kitu, aranjeunna bakal kalakuan jiga daptar baku sarta unggal ngalih ka garis hareup tanpa nempatkeun tab Anjeun neuleu.
Kahiji, nyetél sipat gaya anjeun:
.tablist li {}Lajeng rék ngambang tab anjeun ambéh maranéhanana baris nepi dina pesawat horizontal. ngambang: kénca;
Sarta ulah poho pikeun nambahkeun sababaraha margin antara tab, ngarah teu ngagabung babarengan. margin-katuhu: 0.13em;
gaya li Anjeun kedah kasampak kawas kieu:
li .tablist {ngambang: ditinggalkeun; margin-katuhu: 0.13em; }05 of 06
Nyieun Tab Tingal Kawas Tab sareng CSS 3
Jang ngalampahkeun lolobana ngangkat beurat dina gaya lambar ieu, Kuring targeting nu Tumbu dina daptar unordered. Panyungsi ngakuan yén tumbu ngalakukeun nu langkung lengkep ihwal hiji kaca web ti tag sejen, sangkan éta gampang meunang panyungsi heubeul sasuai jeung hal kawas nagara hover lamun ngagantelkeun aranjeunna ka tag jangkar (Tumbu). Jadi mimitina nulis sipat gaya anjeun:
.tablist li a {} .tablist li a: hover {}Kusabab tab ieu kedah kalakuan jiga tab dina aplikasi, Anjeun hoyong sakabéh wewengkon tab nu janten clickable, teu ngan téks numbu. Jang ngalampahkeun ieu, anjeun kudu ngarobah tag A ti éta normal " inline " kaayaan kana unsur block . tampilan: block; (Mun anjeun resep nyaho ngeunaan bédana, baca Blok-Level vs Inline Unsur .)
Lajeng, mangrupakeun cara nu panggampangna maksa tab anjeun janten simetris ku karana, tapi masih flex pikeun nyocogkeun lebar téks nyaéta sangkan bener tur padding kénca sami. I dipaké dina padding sipat shorthand pikeun ngeset luhur jeung handap pikeun 0 sarta katuhu sarta kénca ka 1em. padding: 0 1em;
Kuring ogé milih ngaleupaskeun negeskeun link, supaya tab kasampak kirang kawas Tumbu. Tapi lamun panongton Anjeun bisa pahili ku nu, ninggalkeun kaluar garis ieu. link-hiasan: taya;
Ku putting wates ipis sabudeureun tab, eta ngajadikeun éta kasampak kawas Tab. I dipaké wates milik shorthand nempatkeun wates sabudeureun sagala wates opat sisi: 0.06em solid # 000; Lajeng dipaké dina wates-handap sipat jang ngaleupaskeun ti handap. Wates-handap: 0;
Saterusna kuring dijieun sababaraha pangaluyuan ka font, warna, jeung warna latar tukang tab. Atur ieu kana gaya anu cocog situs anjeun. font: kandel 0.88em / 2em arial, Jenéwa, helvetica, sans-serif; Warna: # 000; tukang-warna: #ccc;
Sakabéh gaya luhur kudu indit dina pamilihan .tablist li a, aturan ambéh maranéhanana mangaruhan tag jangkar sacara umum. Lajeng sangkan tab muncul leuwih clickable, Anjeun kudu nambahan kaayaan sababaraha aturan .tablist li a: hover.
Kuring resep ngarobah warna téks na tukang nyieun tab pop mun anjeun mouse leuwih eta. latar: # 3cf; Warna: #fff;
Na kuring kaasup panginget sejen kana panyungsi yén Abdi hoyong link pikeun tetep moal underlined. téks-hiasan: taya; Metoda nu geus ilahar sejen nyaeta pikeun ngahurungkeun ngagurat di handapna deui dina nalika anjeun mouse leuwih tab éta. Lamun hayang ngalakukeun eta, ngarobah ka téks-hiasan: ngagurat di handapna;
Tapi Kamana teh CSS 3?
Lamun geus Mayar perhatian, anjeun geus meureun noticed nu aya tacan sagala CSS 3 gaya dipaké dina gaya lambar. Ieu boga kauntungan tina gawe dina sagala browser modern, kaasup Internet Explorer. Tapi teu nyieun tab kasampak kawas nanaon leuwih ti buleud alun. Ku nambahkeun hiji CSS 3 panggero gaya wates-radius (jeung ayeuna teh pakait nelepon browser-spésifik) anjeun tiasa ngadamel edges rounded, kasampak leuwih kawas tab dina folder manila.
The gaya Anjeun kudu ditambahkeun kana .tablist li aturan nyaéta: -webkit-wates-luhur-katuhu-radius: 0.50em; -webkit-wates-luhur-kénca-radius: 0.50em; -moz-wates-radius-topright: 0.50em; -moz-wates-radius-topleft: 0.50em; Wates-luhur-katuhu-radius: 0.50em; Wates-luhur kénca--radius: 0.50em;
Di handap ieu mangrupakeun aturan final gaya I wrote:
.tablist li a {tampilan: block; padding: 0 1em; téks-hiasan: taya; wates: 0.06em solid # 000; Wates-handap: 0; font: kandel 0.88em / 2em arial, Jenéwa, helvetica, sans-serif; Warna: # 000; tukang-warna: #ccc; / * CSS 3 elemen * / webkit-wates-luhur-katuhu-radius: 0.50em; -webkit-wates-luhur-kénca-radius: 0.50em; -moz-wates-radius-topright: 0.50em; -moz-wates-radius-topleft: 0.50em; Wates-luhur-katuhu-radius: 0.50em; Wates-luhur kénca--radius: 0.50em; } .tablist li a: hover {tukang: # 3cf; Warna: #fff; téks-hiasan: taya; }Kalawan gaya ieu, Anjeun gaduh menu tabbed anu hade dina sagala panyungsi utama na Sigana mah tab dicitak nice di CSS 3 panyungsi patuh. Kaca salajengna méré Anjeun salah pilihan langkung anjeun bisa make pakéan eta up malah leuwih.
06 of 06
Nyorot ka Tab Ayeuna
Dina HTML I dijieun, anu UL kagungan hiji daptar unsur kalawan ID. Ieu ngidinan Anjeun pikeun masihan salah Li hiji gaya béda ti sésana. kaayaan paling umum nyaéta sangkan tab ayeuna nangtung kaluar sababaraha cara. Cara séjén pikeun mikir ieu nu rék abu kaluar tab nu moal hirup. Anjeun lajeng ngarobah tempat id téh aya dina kaca béda.
Kuring gaya boh #current A tag ogé #current A: sta hover ambéh duanana rada béda. Anjeun tiasa ngaganti warna warna, latar, sanajan jangkungna, lebar jeung padding unsur éta. Jieun perobahan naon make akal pikiran dina rarancang Anjeun.
.tablist li # ayeuna a {tukang-warna: # 777; Warna: #fff; } .tablist li # ayeuna a: hover {tukang: # 39C; }Anjeun geus rengse! Anjeun geus ngan dijieun menu tabbed pikeun ramatloka anjeun.