Deklarasikan pertama:
Meskipun saya telah bekerja di posisi front-end web selama bertahun-tahun, saya tidak memiliki persyaratan teknis yang tinggi untuk posisi tersebut. HTML dan CSS lebih sering digunakan, dan ada sangat sedikit javascript asli, dan pada dasarnya dimodifikasi oleh salin. Jadi ketika saya benar -benar menulis, saya menemukan bahwa fondasi itu tidak solid, dan saya belajar dan berlatih, dan mendapatkan banyak hal.
Gambar reproduksi:
Tidak ada lagi omong kosong, kode posting
1. Kode CSS
Salinan kode adalah sebagai berikut:
A: Link {Color: White; Text-Decoration: None;}
A: Visited {Color: White; Text-Decorative: None;}
A: Hover {Color: White; Text-Decorative: None;}
A: Active {Color: White; Text-Decorative: None;}
Li {float: left; display: inline; latar belakang-warna:#003366; lebar: 120px; Teks-Align: tengah; margin: 2px; padding: 10px 0 5px 0; Posisi: relatif;}
.Limouseover {latar belakang-warna:#0033ff; Color: Red;}
.Limouseout {latar belakang-warna:#003366; Color: Black;}
Li ul {display: none; width: 120px; Posisi: absolute; kiri: 0; atas: 30px;}
Li ul li {margin: 0px auto; border-top: 1px solid #006699;}
2. Kode JavaScript
Salinan kode adalah sebagai berikut:
<bahasa skrip = javascript>
Menu fungsi (menu1) {
// Pindahkan mouse masuk dan keluar className beralih dan sembunyikan dan tampilkan sakelar.
if (document.geteLementById (menu1)) {
var menu_ul = document.getElementById (menu1);
if (menu_ul.geteLementsByTagname ("li"). length) {
var menu_li = menu_ul.getElementsByTagname ("li");
untuk (i di menu_li) {
menu_li [i] .onmouseOver = function () {this.classname = "limouseover"; if (this.getElementsbyTagname ("ul"). length) {this.getElementsbyTagname ("ul") [0] .style.display = "block";}}
menu_li [i] .onmouseout = function () {this.className = "lIMOUSEOut"; if (this.geteLementsbyTagname ("ul"). length) {this.getElementsbyTagname ("ul") [0] .style.display = "none";}}
}
}
}
}
</script>
3. Kode HTML
Salinan kode adalah sebagai berikut:
<ul id = menu1>
<li> <a href = ""> home </a> </li>
<li> <a href = ""> menu 1 menu 1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> menu 2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<script> var menu1 = menu baru ("menu1"); </script>
menjelaskan:
1. Mempertimbangkan bahwa halaman UL dan LI lebih sering digunakan, Anda dapat menambahkan #menu1 sebelum CSS untuk membatasi ruang lingkup gaya menu.
2. Js terutama mendengarkan pergerakan dan peristiwa penghapusan tikus, dan beralih ke gaya limouseover dan limouseout; Pada saat yang sama, mengubah atribut tampilan submenu untuk mencapai fungsi menampilkan tersembunyi.
3. Halaman yang sama dapat dipanggil berulang kali tanpa konflik. Kode JavaScript dalam kode HTML adalah instance panggilan. Menu1 di sebelumnya adalah nama variabel sewenang -wenang, dan menu1 di braket adalah ID di halaman HTML.
Kerugian dari contoh ini:
1. Mouseover, Mouseout dan Submenu Li dari Li adalah sama, yaitu warna dan font yang sama, dan tidak ada pengaturan yang terpisah.
2. karena kompatibel dengan IE6 dan IE7, Posisi: Absolute digunakan, dan atribut kiri dan atas ditambahkan. Bagian atas harus diatur sesuai dengan ketinggian keseluruhan menu Li.