Menu drop-down sering ditemui dalam pengembangan saya, tetapi tidak ada proyek yang perlu ditulis ulang. Meskipun sederhana tetapi sangat merepotkan untuk memodifikasinya, saya masih relatif malas. Hari ini saya punya waktu untuk mengatur menu dalam pengembangan proyek saya sebelumnya dan menulis versi umum. Saya tidak perlu begitu merepotkan di masa depan.
Fitur
Menu yang dikompilasi hari ini dikembangkan oleh jQuery+CSS dengan karakteristik berikut:
1. Keserbagunaan yang kuat
Ada masalah dengan menu drop-down yang saya gunakan sebelumnya, dan navigasi utama dan submenu perlu ditetapkan secara terpisah. Misalnya, menu tingkat kedua adalah class = "first_menu", menu tingkat ketiga adalah class = "second_menu" ... dan seterusnya. Ada masalah dengan metode penulisan ini, yaitu tidak kondusif bagi programmer yang melakukan output loop. Menu ini hanya perlu memperkenalkan gaya CSS, tanpa perlu mendefinisikan menu multi-level.
2. Instruksi pull-down panggilan otomatis yang indah
Di masa lalu, kami akan menambahkan kelas drop-down ke menu drop-down secara manual. Sekarang, kita hanya perlu mendefinisikan gaya efek drop-down di CSS, dan kode akan secara otomatis mencari menu drop-down dan menambahkan panah indikator;
3. Panggilan Sederhana
Daftar output programmer sederhana dan tidak memerlukan banyak penilaian, cukup hubungi data menu secara rekursif.
menyelesaikan
1. Kode HTML
Pertama, kami mengeluarkan data menu di halaman, yang terdiri dari UL dan LI untuk membentuk daftar menu. Kode struktur spesifik adalah sebagai berikut:
<ul> <li><a href="#">Home</a></li> <li><a href="#">Menu One</a> <ul> <li><a href="#">Rock Coaster</a></li> <li><a href="#">Volcanic Eruption</a></li> <li><a href="#">Little Bird</a></li> </li> </li> <li><a href="#">Menu Two</a> <ul> <li><a href="#">About Us</a> <ul> <li><a href="#">Geographical Geo</a> <ul> <li><a href="#">Flying Pigeon</a></li> <li><a href = "#"> Kelahiran dan abadi </a> </li> <li> <a href = "#"> href = "#"> berhasil </a> </li> </li> </li> <li> <a href = "#"> database </a> <ul> <ul> <li> <li> <a href = "#" href = "#"> enkripsi data </a> </li> <li> <a href = "#"> pemodelan data </a> </li> </li> </li> <li> <a href = "#"> </a> </li> </li> </li> </li> </li> <li> </Li> </li> </li> </li> </li> </li> <li> <li> </Li> </li> </li> </li> </li> </li> <li> <li> </Li> </li> </li> </li> </li> </li> <li> <li> </Li> </li> </li> </li> </li> </li> <li> <li> <li> </Li> </li> </li>
Beberapa kode HTML dasar sederhana dan tidak perlu menjelaskan arti kode. Mereka menekankan struktur kode: apakah menu tingkat kedua, tingkat ketiga atau beberapa level terutama bersarang; Nama Lembar Gaya juga sangat lajang, dan submenu adalah gaya "Sub_Menu", yang sangat kondusif untuk panggilan panggilan kode program.
2. Gaya CSS
Kode gaya CSS juga sangat sederhana, kode spesifiknya adalah sebagai berikut:
A {Text-Decoration: None; } ul, li {List-style: none; Margin: 0; Padding: 0; }/*Menu definisi*/. Menue li {latar belakang:#111; Warna: #fff; Tinggi: 30px; Line-Height: 30px; Posisi: kerabat; float: kiri; margin-kanan: 5px; Lebar: 100px; Teks-Align: tengah; Font-Family: Arial, Helvetica, Sans-Serif; } .Menue li a {color: #fff; Ukuran font: 14px; Tampilan: Blok; }/* Gaya menu tarik-turun*/ul.sub_menu {position: absolute; lebar: 100px; Tampilan: Tidak Ada; z-index: 999; } .Menue li ul.sub_menu li {latar belakang: tidak ada; Warna:#555; font-size: 12px; Border-Bottom: 1px #333 Solid; Posisi: kerabat; Lebar: 100px; Tinggi: 30px; } .Menue li ul.sub_menu li.last {border-bottom: none; } /*js akan menambahkan kelas ini ke Li terakhir, lepaskan efek perbatasan-bottom* /. Menue li ul.sub_menu li a {latar belakang:#222; Warna:#888; Tampilan: Blok; Tinggi: 30px; } .Menue li ul.sub_menu li a: hover, .menue li ul.sub_menu li A.now {latar belakang:#f90; warna: #fff;}. Menue li.Now, .Menue Li.Current {latar belakang:#f60; warna: #FFFF;}/*Jika ada sebuah kelas {latar belakang:#f60; have. Tanpa memperbaiki hak; Padding-Right: 15px;}/*Panah navigasi utama turun*/. Menue li A.Hasminu {latar belakang: url (panah.png) tidak ada kembali kanan; Padding-Right: 15px; posisi latar belakang: kanan -30px;}/*Panah menu tarik-turun benar*/. Menue li ul.sub_menu li A.Hasmenu {latar belakang:#222 url (panah.png) no-repeat kanan atas;}. No-Repeat Right Top;}. Menue Li Ul.sub_menu li A.Hasmenu: hover {latar belakang:#f90 url (panah.png) TOP kanan tidak-repeat; Warna: #ffff;}Di sini saya hanya akan menekankan dua tindakan pencegahan:
1. Perbedaan antara absolut dan relatif dalam posisi
Absolute: Positioning Absolute, CSS ditulis sebagai "Posisi: Absolute;", dan posisinya dibagi menjadi dua situasi, sebagai berikut:
A. Jika atas, kanan, bawah, dan kiri tidak diatur, standarnya adalah titik asli berdasarkan "Area Asli Titik Asli" induk.
B. Ada kasus di mana atas, kanan, bawah, dan kiri diatur. Ada dua situasi sebagai berikut:
(1). Induk tidak memiliki atribut posisi, dan sudut kiri atas browser (mis. Tubuh) diposisikan sebagai "titik koordinat asli". Posisi ditentukan oleh atribut atas, kanan, bawah, dan kiri.
(2). Orang tua memiliki atribut posisi, dan "titik asli koordinat" orang tua adalah titik asli.
Relatif: Penentuan posisi relatif, CSS ditulis sebagai "Posisi: Relatif;", merujuk pada "titik asli konten" orang tua sebagai titik asli, dan tanpa orang tua, "titik asli" dari titik asli "tubuh sebagai titik asli. Posisi ditentukan oleh atribut atas, kanan, bawah, dan kiri, dan memiliki fungsi "peregangan atau tinggi menempati".
Dua perbedaan di atas sangat penting dan merupakan teknik yang sangat umum. Anda harus membedakannya. Saya telah membuang banyak waktu dalam pengembangan dan menemukan masalah. Bahkan, itu disebabkan oleh dua atribut ini.
2. Gunakan posisi latar belakang
Terkadang, untuk meningkatkan kecepatan situs web dan memfasilitasi manajemen situs web, kami sering menempatkan beberapa gambar kecil yang umum digunakan pada gambar besar. Ketika CSS membutuhkan gambar kecil yang sesuai, itu dapat dicapai melalui metode ini. Selama kita mengerti apa artinya, sangat nyaman untuk menelepon. Metode ini menjelaskan bahwa titik putih adalah fungsi intersep gambar, dan detail penggunaan adalah sebagai berikut:
tata bahasa:
Latar belakang posisi: Panjang || panjang
Latar belakang posisi: posisi || posisi
Nilai:
Panjang: Persen | Nilai panjang yang terdiri dari angka titik mengambang dan pengidentifikasi unit.
Posisi: Top | tengah | Bawah | kiri | tengah | Kanan
menjelaskan:
Mengatur atau mengambil lokasi gambar latar belakang objek. Properti latar belakang-gambar harus ditentukan terlebih dahulu. Penentuan posisi atribut ini tidak terpengaruh oleh pengaturan atribut (padding) patch objek. Nilai standarnya adalah: 0% 0%. Pada saat ini, gambar latar belakang akan diposisikan di sudut kiri atas area konten di mana objek tidak termasuk tambalan (padding). Jika hanya satu nilai yang ditentukan, nilainya akan digunakan untuk koordinat horizontal. Ordinate akan default hingga 50%. Jika dua nilai ditentukan, nilai kedua digunakan untuk ordinat. Jika nilai diatur ke pusat kanan, karena tepat sebagai nilai sumbu horizontal akan mengesampingkan nilai tengah, gambar latar belakang akan diposisikan ke kanan. Berikut beberapa persamaan
Kiri atas, atas kiri setara dengan 0% 0%.
Top, Top Center, Center Top setara dengan 50% 0%.
Top kanan, kanan atas setara dengan 100% 0%.
Kiri, tengah kiri, tengah kiri setara dengan 0% 50%.
Pusat, pusat pusat setara dengan 50% 50%.
Kanan, tengah kanan, kanan tengah setara dengan 100% 50%.
Bawah kiri, dasar kiri setara dengan 0% 100%.
Bawah, tengah bawah, tengah bawah setara dengan 50% 100%.
kanan bawah, bagian kanan bawah setara dengan 100% 100%
3. Kode JS
Menu ini didasarkan pada jQuery, jadi pertama-tama Anda harus memperkenalkan basis kode jQuery, dan kemudian tulis kode JS berikut untuk mengimplementasikan menu tarik-turun.
<Script src = "js/jQuery.min.js"> </script> <script> $ (dokumen) .ready (function () {// atur highlight default untuk navigasi tidak ada hubungannya dengan menu ini $ ("Ul.Menue Li. -menue_li: eq (0)"). AddClass ("Current" Current ("Current")/*JQuery untuk Mulai/JQuery: JQuery*JQuery (0) "). AddClass (" Current "Current") $ bawah $ (". Sub_menu"). Temukan ("Li: Last-Child"). AddClass ("Last") // Transfer seluruh Li untuk menentukan apakah submenu disertakan. if ($ (this) .find ("ul"). length! = 0) {$ (this) .find ("a: first"). addclass ("hasmenu")}}) // $ (". Menue li"). hover (function () {$ (ini) .addclass ("sekarang"); var = $ (function () {$ (ini) .addclass ("Now"); var = $ (function () {$ (ini) .AddClass ("Now"); var = $ (function () {$ (ini) .AddClass ("Now"); var = $ (function () {$ (ini) .AddClass ("Now"); var = $ (function () {$ (ini) .AddClass ("Now"); var = $ (function () {) menu.find (UL.SUB_MENU: First "). submenu.css ({kiri: "100px", atas: "0px"}) $ (". Sub_Menu li"). Hover (function () {$ (this) .find ("a: first"). addClass ("now") $ (this) .find ("ul: first"). show ();} function (); $ (ini) .find ("a: first"). removeClass ("now") $ (this) .find ("ul: first"). hide ()});/*jQuery menu end*/}) </skrip>Melalui langkah-langkah di atas, menu multi-level umum terwujud. Kode di atas adalah akumulasi perkembangan harian saya. Karena level saya yang terbatas, mungkin ada banyak kesalahan. Saya berharap kolega saya akan mengkritik dan memperbaiki atau mengusulkan kode yang lebih dioptimalkan untuk referensi saya. Terima kasih.
Kode implementasi di atas dari menu drop-down Universal Infinitus adalah semua konten yang telah saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.