Komentar: Artikel ini terutama memperkenalkan metode menggunakan jQuery untuk mengimplementasikan menu navigasi responsif HTML5. Teman yang membutuhkannya bisa merujuknya.
Diimplementasikan melalui JQuery+HTML5, ketika jendela browser dipersempit atau diakses oleh ponsel, menu navigasi menjadi menu drop-down tombol. Gambar reproduksi:
Kode HTML:
<ul>
<li> <a href = "#"> tombol </a> </li>
<li> <a href = "#"> tombol </a> </li>
</ul>
</sav>
Kode jQuery:
Melalui kode jQuery berikut, <Div id = menu-icon> akan ditambahkan ke <nav id = nav_wrap>. Saat Anda mengklik #menu-icon, menu akan ditampilkan:
<type script = "Text/JavaScript" src = "<a href =" http://ajax.googleapis.com/ajax/libs/jQuery/1.7/jQuery.min.js "> </script"> "> </skrip </a>>
<type skrip = "Teks/JavaScript">
$ (dokumen) .ready (function ($) {
/ * ikon menu prepend */
$ ('#nav-wrap'). prepend ('<div> menu </div>');
/ * Toggle nav */
$ ("#menu-icon"). on ("click", function () {
$ ("#nav"). slidetoggle ();
$ (ini) .toggleClass ("aktif");
});
});
</script>
Melihat elemen melalui browser dapat melihat kode yang ditampilkan di HTML sebagai berikut:
<av>
<div> menu </div>
<ul>
<li> <a href = "#"> tombol </a> </li>
<li> <a href = "#"> tombol </a> </li>
</ul>
</sav>
Kode CSS:
Dalam kode CSS, pertama-tama atur atribut #menu-icon untuk ditampilkan: None;, kemudian gunakan kueri media untuk menilai kueri media dan kemudian mengubah #menu-icon untuk ditampilkan: blok;. Berikut ini adalah kode gaya CSS kunci untuk menentukan gaya ketika lebar browser kurang dari 600px:
Efek terakhir adalah rendering pertama dalam artikel.