01 06
Cara Membuat Navigasi Tab dengan CSS dan Tanpa Gambar
Navigasi pada halaman web adalah bentuk daftar, dan navigasi tab seperti daftar horizontal. Ini cukup mudah untuk membuat navigasi tab horizontal dengan CSS, tetapi CSS 3 memberi kita beberapa alat untuk membuatnya terlihat lebih bagus.
Tutorial ini akan membawa Anda melalui HTML dan CSS yang dibutuhkan untuk membuat menu tab CSS. Klik tautan itu untuk melihat bagaimana tampilannya.
Menu tab ini tidak menggunakan gambar , hanya HTML dan CSS 2 dan CSS 3. Ini dapat dengan mudah diedit untuk menambahkan lebih banyak tab atau mengubah teks di dalamnya.
Dukungan Browser
Menu tab ini akan berfungsi di semua browser utama . Penjelajah Internet tidak akan menampilkan sudut yang membulat, tetapi jika tidak, ia akan menampilkan tab seperti Firefox, Safari, Opera, dan Chrome.
02 06
Tulis Daftar Menu Anda
Semua menu dan tab navigasi benar-benar hanya daftar yang tidak diurutkan. Jadi, hal pertama yang ingin Anda lakukan adalah menulis daftar tautan yang tidak diurutkan ke tempat yang Anda inginkan untuk navigasi tab Anda.
Tutorial ini mengasumsikan bahwa Anda menulis HTML Anda di editor teks dan Anda tahu di mana menempatkan HTML untuk menu Anda di halaman web Anda.
Tulis daftar tanpa urutan Anda seperti ini:
- class = "tablist">
- CSS 3
- id = "current"> Tab
- Untuk
- Menu
Anda akan melihat bahwa kode memanggil dua hal: class = "tablist" dan id = "current". Yang pertama diperlukan . Jika Anda tidak menempatkan kelas tablist pada daftar unordered Anda, tab tidak akan berfungsi. Yang kedua bersifat opsional. Masukkan id = "current" pada tab mana yang ingin Anda soroti pada halaman itu. Saya biasanya menggunakan ini untuk menyorot halaman yang saya gunakan, tetapi Anda dapat menggunakannya untuk menyorot tab yang paling penting. Atau Anda dapat menghapusnya sepenuhnya.
03 06
Mulai Mengedit Lembar Gaya Anda
Anda dapat menggunakan lembar gaya eksternal atau lembar gaya internal . Halaman menu sampel menggunakan style sheet internal di
dokumen.Pertama Kita akan Gaya UL itu Sendiri
Di sinilah kami menggunakan daftar tab kelas .di HTML. Daripada menata tag UL, yang akan menata semua daftar tidak berurutan di halaman Anda, Anda harus menata hanya kelas UL. tablist Jadi entri pertama di CSS Anda seharusnya:
.tablist {}Saya suka dimasukkan ke dalam kurung kurawal akhir (}) sebelumnya, jadi saya tidak melupakannya nanti.
Meskipun kami menggunakan tag daftar tak berurutan untuk daftar menu tab, tetapi kami tidak ingin ada butir atau angka yang masuk. Jadi, gaya pertama yang harus Anda tambahkan. daftar-gaya: tidak ada; Ini memberitahu browser bahwa meskipun ini adalah daftar, ini adalah daftar tanpa gaya yang ditentukan sebelumnya (seperti peluru atau angka).
Kemudian, Anda dapat mengatur tinggi daftar Anda agar sesuai dengan ruang yang Anda inginkan untuk diisi. Saya memilih 2em untuk tinggi saya, karena itu menggandakan ukuran font standar, dan memberikan sekitar setengah em di atas dan di bawah teks tab. tinggi: 2em; Tetapi Anda dapat mengatur lebar Anda ke ukuran apa pun yang Anda inginkan. Tag UL secara otomatis akan mengambil 100% dari lebar, jadi kecuali Anda ingin lebih kecil dari kontainer saat ini, Anda dapat membiarkan lebar keluar.
Akhirnya, jika style sheet master Anda tidak memiliki preset untuk tag UL dan OL, Anda akan ingin memasukkannya. Ini berarti Anda harus mematikan batas, margin, dan padding pada UL Anda. padding: 0; margin: 0; border: none; Jika Anda sudah mengatur ulang tag UL, Anda dapat mengubah margin, padding, atau batas ke sesuatu yang sesuai dengan desain Anda.
Kelas .tablist terakhir Anda akan terlihat seperti ini:
.tablist {list-style: none; tinggi: 2em; padding: 0; margin: 0; border: none; }04 06
Mengedit Item Daftar LI
Setelah Anda menata daftar tidak berurutan, Anda perlu memberi style pada tag LI di dalamnya. Jika tidak, mereka akan bertindak seperti daftar standar dan setiap pindah ke baris berikutnya tanpa menempatkan tab Anda dengan benar.
Pertama, siapkan properti gaya Anda:
.tablist li {}Kemudian Anda ingin mengapung tab Anda sehingga mereka berbaris di bidang horizontal. float: kiri;
Dan jangan lupa untuk menambahkan beberapa margin di antara tab, sehingga mereka tidak bergabung bersama. margin-right: 0.13em;
Gaya li Anda akan terlihat seperti ini:
.tablist li {float: left; margin-right: 0.13em; }05 06
Membuat Tab Seperti Tab dengan CSS 3
Untuk melakukan sebagian besar pengangkatan berat di lembar gaya ini, saya menargetkan tautan dalam daftar tidak berurutan. Peramban mengenali bahwa tautan melakukan lebih banyak hal di laman web daripada tag lain, jadi lebih mudah untuk mendapatkan browser yang lebih lawas untuk mematuhi hal-hal seperti hover state jika Anda melampirkannya ke tag anchor (tautan). Jadi pertama-tama tuliskan properti gaya Anda:
.tablist li a {} .tablist li a: hover {}Karena tab ini harus bertindak seperti tab dalam aplikasi, Anda ingin seluruh area tab dapat diklik, bukan hanya teks yang ditautkan. Untuk melakukan ini, Anda harus mengonversi tag A dari status " sebaris " normal menjadi elemen pemblokiran . display: block; (Jika Anda tertarik untuk mengetahui lebih lanjut tentang perbedaannya, baca Blok-Level vs. Inline Elements .)
Kemudian, cara mudah untuk memaksa tab Anda menjadi simetris satu sama lain, tetapi tetap lentur agar sesuai dengan lebar teks adalah dengan membuat padding kanan dan kiri sama. Saya menggunakan properti singkatan padding untuk mengatur bagian atas dan bawah ke 0 dan kanan dan kiri ke 1em. padding: 0 1em;
Saya juga memilih untuk menghapus tautan yang digarisbawahi, sehingga tab terlihat kurang seperti tautan. Tetapi jika audiens Anda mungkin bingung dengan itu, tinggalkan baris ini. dekorasi-tautan: tidak ada;
Dengan meletakkan batas tipis di sekitar tab, itu membuat mereka terlihat seperti tab. Saya menggunakan properti steno perbatasan untuk menempatkan perbatasan di sekitar empat sisi perbatasan: 0,06 padat # 000; Dan kemudian menggunakan properti border-bottom untuk menghapusnya dari bawah. pembatas bawah: 0;
Lalu saya membuat beberapa penyesuaian pada warna font, warna, dan latar belakang tab. Setel ini ke gaya yang cocok dengan situs Anda. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; warna: # 000; warna latar: #ccc;
Semua gaya di atas harus masuk ke pemilih .tablist li a, aturan sehingga mereka mempengaruhi tag anchor secara umum. Kemudian untuk membuat tab tampak lebih dapat diklik, Anda harus menambahkan beberapa aturan negara .tablist li a: hover.
Saya suka mengubah warna teks dan latar belakang untuk membuat tab muncul saat Anda mengarahkan mouse ke atasnya. latar belakang: # 3cf; warna: #fff;
Dan saya menyertakan pengingat lain ke browser yang saya inginkan agar tautannya tidak digarisbawahi. teks-dekorasi: tidak ada; Metode umum lainnya adalah dengan mengaktifkan kembali garis bawah saat Anda mengarahkan mouse ke tab. Jika Anda ingin melakukan itu, ubahlah menjadi teks-dekorasi: garis bawah;
Tetapi, di manakah CSS 3?
Jika Anda memperhatikan, Anda mungkin memperhatikan bahwa tidak ada gaya CSS 3 yang digunakan dalam style sheet. Ini memiliki keuntungan bekerja di browser modern apa pun, termasuk Internet Explorer. Tapi itu tidak membuat tab terlihat seperti lebih dari kotak persegi. Dengan menambahkan 3 border border call gaya CSS (dan itu terkait dengan panggilan khusus browser), Anda dapat membuat ujung-ujungnya membulat, agar terlihat lebih mirip tab pada folder manila.
Gaya yang harus Anda tambahkan ke .tablist li a aturan adalah: -webkit-border-top-right-radius: 0.50em; -webkit-batas-atas-kiri-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;
Ini adalah aturan gaya terakhir yang saya tulis:
.tablist li a {display: block; padding: 0 1em; teks-dekorasi: tidak ada; border: 0.06em padat # 000; pembatas bawah: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; warna: # 000; warna latar: #ccc; / * Elemen CSS 3 * / webkit-border-top-kanan-radius: 0,50em; -webkit-batas-atas-kiri-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; warna: #fff; teks-dekorasi: tidak ada; }Dengan gaya ini, Anda memiliki menu tab yang berfungsi di semua browser utama dan terlihat seperti tab tercetak yang bagus di browser yang memenuhi CSS 3. Halaman selanjutnya memberi Anda satu opsi lagi yang dapat Anda gunakan untuk mendandani lebih banyak lagi.
06 06
Sorot Tab Arus
Dalam HTML yang saya buat, UL memiliki satu elemen daftar dengan ID. Ini memungkinkan Anda memberi satu LI gaya yang berbeda dari yang lain. Situasi yang paling umum adalah membuat tab saat ini menonjol dalam beberapa cara. Cara lain untuk memikirkan ini adalah bahwa Anda ingin memutus tab yang tidak hidup. Anda kemudian mengubah tempat id di halaman yang berbeda.
Saya gaya kedua tag #current serta #current A: hover sta sehingga keduanya sedikit berbeda. Anda dapat mengubah warna, warna latar belakang, bahkan ketinggian, lebar, dan padding dari elemen itu. Buat perubahan apa pun yang masuk akal dalam desain Anda.
.tablist li # saat ini {background-color: # 777; warna: #fff; } .tablist li # current a: hover {background: # 39C; }Dan selesai! Anda baru saja membuat menu tab untuk situs web Anda.