Pendahuluan: Artikel ini akan mengajarkan Anda langkah demi langkah cara membuat menu navigasi pintu geser standar terpisah tiga lapis yang sangat keren. Dari ide, prinsip, langkah, dan metode, dapat dikatakan bahwa "segalanya mungkin". Anda, saya yakin setelah membaca artikel ini, Anda juga dapat membuat menu navigasi standar super cantik Anda sendiri. Menu ini tidak memiliki struktur yang berlebihan dan kondusif untuk keluaran data yang dinamis. Sangat cocok untuk digunakan dalam proyek biasa. Tutorial ini membahas tentang prinsip dasar pintu geser. Saya yakin akan bermanfaat bagi teman-teman yang masih meraba-raba di jalan ini! Tentu saja, jika ada kesalahan atau masalah, Anda dipersilakan untuk mendiskusikannya.
Tujuan ideal dari menu navigasi ini adalah
Mari terapkan menu ideal ini selangkah demi selangkah!
Saya sering melihat banyak teman membuat menu di forum, tapi sejujurnya, entah strukturnya mubazir, bentuknya tapi tidak ada semangatnya, atau ada semangatnya tapi tidak ada tampilannya. Dan yang ingin kita buat sekarang adalah menu terbaik. Baik Anda seorang pemula atau veteran, Anda akan menemukan sesuatu yang berguna dalam tutorial ini.
Struktur menu yang ideal harus bersih, bebas dari redundansi, dan terpisah. Namun karena berbagai alasan, banyak hal yang tidak berarti akan ditambahkan ke dalamnya, dan pada akhirnya semakin jauh dari kata "bersih". . Oleh karena itu, sebelum membuat suatu menu, ada prinsip-prinsip tertentu yang harus diperhatikan dalam keseluruhan proses produksi dan tidak dapat dihalangi oleh kekuatan luar manapun.
Struktur:
Menurut saya, menu standar yang ideal harus memiliki struktur berikut:
Struktur asli menu sekarang tersedia. Anda dapat melihat bahwa tidak ada tag yang tidak berarti di dalamnya. Mari kita lihat di browser. Oh, sederhana sekali. Itu hanya teks asli, seperti, um, ini seperti menu yang kita gunakan untuk memesan makanan di restoran. Mungkin lebih sederhana dari itu, dan ada sesuatu di depan setiap menu .Sebuah titik kecil! Ya ampun, kita jauh sekali dari menu cantik kita!
Gaya:
Ya, sekarang hanya kerangka. Mari kita mempercantiknya sedikit dan menambahkan beberapa gaya sederhana. Setidaknya kita harus menghilangkan titik-titik kecil dan mengaturnya secara horizontal!
Oke, mari tambahkan beberapa gaya!
Baiklah, lihat sekarang, kita telah mencapai tujuan kecil kita.
Sekarang kerangka sudah terpasang, langkah selanjutnya adalah memasang pakaian cantik di setiap item menu.
Untuk memenuhi syarat pertama, pertama-tama Anda harus memiliki kancing yang indah dan menggambarnya sendiri. Oh, saya bukan seniman, itu sulit! Namun, jangan terlalu sabar. Internet begitu luas sehingga ada banyak keajaiban. Mungkin seseorang telah melakukan sesuatu yang baik. Saya baru saja mencari di Google dan menemukannya. (Air mata mengalir...) Kode sumber tombol: http://bbs.blueidea.com/thread-2860891-1-1.html
Dengan kode sumber tombol yang dirancang, ini menghemat bagian desain, yang sangat bagus. Namun untuk menjadikannya tombol tiga keadaan, kita perlu memodifikasi tombol ini. Apakah Anda melihat tujuan ketujuh? Kami akan membuat tombol adaptif, jadi kami perlu melakukan beberapa pemrosesan pada tombol ini.
Kami menampilkan ketiga tombol ini dalam tiga keadaan: saat mouse digerakkan menjauh, setelah diklik, dan saat mouse digerakkan ke atas. Untuk membuat menu pintu geser, Anda perlu memotong tombol dari tengah ditempatkan di sebelah kiri, dan gambar di sebelah kanan adalah Letakkan di sisi kanan. Untuk beradaptasi dengan pemanjangan teks, lebar lapisan ini perlu diregangkan sedikit. Namun, gambar ini memiliki efek bayangan yang sangat kompleks dan tidak dapat diregangkan begitu saja, jika tidak, efeknya tidak akan sama. Mari kita potong terbuka di tengah dan regangkan sisi kiri gambar ke kanan ke depan. Seperti yang ditunjukkan pada Gambar 2
Gambar 1
Jadi pertama-tama kita potong menjadi enam bagian seperti yang ditunjukkan pada gambar, lalu gabungkan keenam gambar tersebut menjadi satu. Mengapa demikian? Lihatlah prinsip sprite css! Saya tidak akan menjelaskan secara detail disini, Anda dapat membaca artikel saya yang lain "Membuat Kartu Poker Seri 1---Teknologi Optimasi Background Gambar Sprite CSS"
Gambar 2
Pada gambar di atas, gambar pertama dan kedua membentuk style menu normal (default style), gambar ketiga dan keempat membentuk style scrolling, dan gambar kelima dan keenam membentuk style item menu yang diklik.
Kami secara khusus mengekstrak gambar bayangan dan membuatnya menjadi gambar latar kecil.
Grafik yang diperlukan pada
Gambar 3
sudah siap. Selanjutnya, mari tambahkan gambar ini ke item menu.Sebuah tombol memerlukan dua gambar untuk ditampilkan. Semua orang di dunia tahu bahwa tag html hanya dapat menampung satu gambar (jika Anda menemukan bahwa sebuah tag dapat menampung dua gambar, tolong beri tahu saya tepat waktu dan saya akan mentraktir Anda makan malam!). Oh! Setiap item dalam struktur menu saya memiliki tepat dua tag, satu adalah li, dan ada tag A di dalamnya, yang dapat digunakan untuk menampung gambar kiri dan kanan. Li digunakan untuk menahan gambar di sebelah kiri, dan A digunakan untuk menahan gambar di sebelah kanan. Saya sangat mengagumi diri saya sendiri, saya bisa memunculkan ide-ide bagus seperti itu, dan saya dalam kepuasan diri sendiri...
Jangan sibuk ya Tuhan, jika saya memasang gambar seperti ini, bagaimana saya bisa mencapainya? tiga status gulir mouse? Kita semua harus tahu bahwa kecuali IE6, browser lain saat ini mendukung kelas semu li:hover. Namun, agar kompatibel dengan semua browser utama (ini adalah tujuan kami yang ke 8, jangan lupa!), metode ini tidak berhasil. IE6 hanya dapat menerapkan kelas semu hover pada tag A, dan mengabaikan tag lainnya!
Karena IE6 hanya dapat menerapkan hover pseudo-class pada tag A, maka jika kita ingin membuat menu pintu geser adaptif, kita perlu melakukan beberapa perubahan struktural. Sepertinya kita hanya dapat menambahkan tag lain ke tag A, jadi struktur menunya Akan terlihat seperti ini. (Catatan: Di sinilah struktur mulai berubah. Meskipun saya selalu ingin menghindari hal ini terjadi, tampaknya tag ini harus ditambahkan untuk memenuhi persyaratan.)
Kami menambahkan kontainer span ke tag A, yang menyertakan konten teks. Sekarang ada dua label yang bisa menampung dua gambar. Kita letakkan gambar kanan di latar belakang tag A dan ratakan ke kanan, dan letakkan gambar kiri di tag SPAN dan ratakan ke kiri. Ini akan menampilkan bentuk tombol yang lengkap.
Untungnya, meskipun tag tambahan ditambahkan, tag tersebut tidak sepenuhnya tanpa makna.
Oke persiapan kita hampir selesai, saatnya memberi menu baju baru.
Jika kita ingin membuat menu dengan lebar adaptif, kita tidak bisa mengatur nilai lebar menu tersebut, sehingga kita tidak bisa mengatur lebarnya lalu melayang ke kiri seperti yang biasa kita lakukan saat membuat menu horizontal dengan lebar tetap. Jika demikian, ketika lebar setiap item menu berbeda, Anda perlu menentukan lebar setiap item secara terpisah, kemudian Anda harus menentukan ID atau CLASS untuk setiap item menu, dan metode ini tidak kondusif untuk perulangan dinamis keluaran program latar belakang.
Yang kita perlukan adalah secara otomatis mengatur setiap item menu dalam satu baris dari kiri ke kanan seperti elemen inline. Kemudian kita perlu menu untuk ditampilkan inline. Oke, mari kita gunakan display:inline. Ini adalah Atribut yang sangat berguna: Susunannya yang diurai dapat memenuhi persyaratan dasar kami: secara otomatis menyusun elemen label dari kiri ke kanan dalam satu baris, dan lebar setiap item dapat berbeda.
Jika penggunaan atribut di atas benar-benar dapat memenuhi kebutuhan kita, maka tidak akan ada konten teks seperti berikut ini.
Meskipun atribut ini dapat memenuhi kebutuhan dasar proyek kita, namun memiliki kelemahan yang sangat fatal: tidak dapat mengatur nilai lebar dan tinggi. Jika tidak percaya, Anda bisa mencobanya. Ini hanya muncul sebagai tinggi dan lebar default teks. Ini akan disembunyikan secara otomatis setelah melebihi nilai lebar dan tinggi ini. Dengan cara ini, saya memiliki gambar latar belakang di sini. Untuk menunjukkan efek gambar ini, kita perlu memberi lebar dan tinggi. Ini berarti kami tidak dapat mencapai efek kami, dan ini membuat frustrasi! Untungnya, ada atribut lain: display:inline-block; kinerjanya adalah yang kita butuhkan.
Tapi... atribut ini juga memiliki kelemahan yang fatal, hanya bisa dikenali oleh browser tingkat lanjut seperti FF3. Browser lain hanya dapat mengambil jalan memutar. Uh-oh! Oleh karena itu, betapa pentingnya menyatukan standar browser! Tampaknya HACK juga merupakan salah satu cara melegakan yang tidak ada pilihan lain selain kita lakukan.
Untungnya, beberapa ahli telah menemukan solusinya. Silakan baca dua artikel ini terlebih dahulu.
Tutorial terkait:
" Dua contoh penerapan display:inline-block " (Qin Ge)
Kita semua memahami prinsip
" Atribut Inline-block untuk Simulasi Kompatibilitas " (Yi Fei).
Kita dapat membuat menu adaptif berdasarkan teknik yang diberikan dalam dua artikel di atas.Mari kita tulis dulu gaya gambar di sebelah kanan, yang diterapkan pada tag node anak A dari elemen li.
Pertama kita atur display:inline-block, lalu kita gunakan padding untuk memperluas jarak sisinya menjadi beri ruang untuk mengisi gambar. Perhatikan bahwa jalur gambar di sini diganti dengan jalur Anda sendiri. Kemudian atur gaya lainnya, seperti menghilangkan garis bawah, warna font, ukuran font, dll. Atur gambar agar sejajar ke kanan.
Gambar di sisi kiri tombol ditempatkan di elemen SPAN dukung itu. Buka lebar dan tingginya.
lalu atur kembali ke mode inline inline, memicu fitur haslayout IE.
Pada kode di atas, kita juga melihat aplikasi HACK, *padding-bottom: 0; dan *padding-top: 0;, yang digunakan untuk mengatasi berbagai efek browser seperti IE dan FF. Jika Anda tidak percaya, Anda dapat menghapusnya dan melihat apa efeknya. Ada masalah dengan ekstensi ketinggian di IE.
Oke, sekarang saatnya menulis efek ketika mouse digerakkan.
Lalu selanjutnya adalah efek setelah klik mouse.
oke, sepertinya Anda sudah selesai , tampaknya dapat mencapai hasil yang memuaskan. Di bawah ini adalah tangkapan layar:
Gambar 4
Versi CSS murni dari menu pintu geser pada dasarnya sudah siap.