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 yang ingin dicapai oleh menu navigasi ini adalah: Cantik dan pribadi. Strukturnya jelas, semantiknya jelas, dan tidak ada tag yang berlebihan. Kinerja, struktur, dan perilaku dipisahkan pada tiga tingkat, tanpa gangguan apa pun. Kondusif untuk keluaran data program latar belakang. Menu memiliki perubahan efek tiga keadaan. Dapat menyorot dan merekam item menu yang diklik. Lebar teks yang dapat disesuaikan. Saat konten teks berubah panjangnya, tombol dapat berubah seiring waktu. Kompatibel dengan semua browser utama. Mari terapkan menu ideal ini selangkah demi selangkah! Struktur Menurut saya, menu standar yang ideal harus memiliki struktur berikut: <div id="nav"> Struktur asli menu sekarang tersedia. Anda dapat melihat bahwa tidak ada label yang tidak berarti di dalamnya. Coba kita lihat di browser. Oh, sederhana sekali. Itu hanya teks asli, seperti, um, seperti menu yang kita gunakan untuk memesan makanan di restoran. Ya ampun, kita jauh sekali dari menu cantik kita! Gaya Oke, sekarang tinggal kerangka saja, mari kita percantik sedikit, tambahkan beberapa gaya sederhana, setidaknya hilangkan titik-titik kecilnya, dan susun secara horizontal! Oke, mari tambahkan beberapa gaya! *{margin:0;padding:0;}/*Satukan menjadi satu tampilan, jika tidak maka akan terlihat jelek di berbagai browser*/ Nah, lihat sekarang, kita telah mencapai tujuan kecil kita. Dengan kode sumber tombol yang dirancang, sangat bagus untuk menyimpan bagian desain. Namun untuk menjadikannya tombol tiga keadaan, kita perlu memodifikasi tombol ini. Apakah Anda melihat tujuan ketujuh? Kami membuat tombol adaptif, jadi kami perlu melakukan beberapa pemrosesan pada tombol ini. Ketiga tombol ini kami tampilkan 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. 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" 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. Grafik yang diperlukan 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, dan saya sangat puas dengan diri saya sendiri... Jangan sibuk ya Tuhan, jika saya memasang gambar dengan cara ini, bagaimana saya bisa mencapai 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 bisa 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 bisa 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 untuk memenuhi persyaratan, label ini harus ditambahkan.) <li><a href="#none" title="Bingjifeng"><span>Bingjifeng</span></a></li> Kami menambahkan wadah 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, lalu letakkan gambar kiri di tag SPAN dan ratakan ke kiri. Ini akan menampilkan bentuk tombol yang lengkap. 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 butuhkan 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. 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! Nampaknya HACK juga menjadi salah satu cara pertolongan yang harus kita atasi. Untungnya, beberapa ahli telah menemukan solusinya. Silakan baca dua artikel ini terlebih dahulu. Tutorial terkait: Kita semua paham prinsipnya, dan kita bisa membuat menu adaptif berdasarkan teknik yang diberikan pada dua artikel di atas. Mari kita tulis dulu gaya gambar di sebelah kanan, yang diterapkan pada tag node anak A dari elemen li. li a{display:inline-block; padding-kanan:30px; padding-atas:10px; *padding-atas:0; padding-bawah:13px; *padding-bawah:0; /button.gif) tanpa pengulangan kanan -36 piksel; dekorasi teks: tidak ada; warna:#fff;} Pertama kita atur display:inline-block, lalu kita gunakan padding untuk memperluas marginnya sehingga memiliki sejumlah 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. li rentang{display:inline-block; padding-left:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; padding-bottom:0; ; latar belakang:url(images/button.gif) tanpa pengulangan kiri atas; Gambar di sisi kiri tombol ditempatkan di elemen SPAN, sejajarkan gambarnya ke kiri, dan atur padding untuk memperluas lebar dan tingginya. li a,li a span{display:inline;cursorointer;} Kemudian atur kembali ke mode inline, memicu fitur haslayout IE. li a:hover{padding-right:30px;background:url(images/button.gif) tanpa pengulangan ke kanan -108px;} Berikutnya adalah efek setelah klik mouse. li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;} oke, sepertinya sudah selesai, jika dilihat di browser berbeda sepertinya sudah bisa mendapatkan hasil yang memuaskan. Sekarang versi CSS murni dari menu pintu geser pada dasarnya sudah siap.
Saya sering melihat banyak teman membuat menu di forum, tapi sejujurnya, menu tersebut mubazir secara struktural, atau 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.
<ul id="menu">
<li><a href="#none" title="Blog Garden">Taman Blog</a></li>
<li><a href="#none" title="Komunitas">Komunitas</a></li>
<li><a href="#none" title="Beranda">Beranda</a></li>
<li><a href="#none" title="Esai Baru">Esai Baru</a></li>
<li><a href="#none" title="Kontak">Kontak</a></li>
<li><a href="#none" title="Management">Manajemen</a></li>
<li><a href="#none" title="Berlangganan">Berlangganan</a></li>
<li><a href="#none" title="Puncak Bingji">Puncak Bingji</a></li>
</ul>
</div>
ul{list-style:none}/*Hapus titik-titik*/
li{float:left;margin-left:10px;}/*Susun secara horizontal dan beri spasi. Jangan menekan saya terlalu erat. */
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 mencarinya di Google dan menemukannya. (Air mata mengalir...) Kode sumber tombol: http://bbs.blueidea.com/thread-2860891-1-1.html
Kami secara khusus mengekstrak gambar bayangan dan membuat gambar latar kecil.
Untungnya, meskipun tag tambahan ditambahkan, tag tersebut tidak sepenuhnya tanpa makna.
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 kita tidak dapat mencapai efek yang kita inginkan, dan ini membuat frustrasi! Untungnya, ada atribut lain: display:inline-block; kinerjanya adalah apa yang kita butuhkan.
"Dua contoh penerapan tampilan: blok-inline" (Qin Ge)
"Atribut blok sebaris untuk kompatibilitas simulasi" (Yi Fei)
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.
li a:hover span{padding-left:30px;background:url(images/button.gif) tanpa pengulangan ke kiri -72px;font-weight:bold;}
li a: rentang aktif{padding-left:30px;background:url(images/button.gif) tanpa pengulangan ke kiri -144px;font-weight:bold;}