ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำวิธีการใช้ jQuery เพื่อใช้เมนูการนำทางที่ตอบสนอง HTML5 เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
นำไปใช้ผ่าน JQuery+HTML5 เมื่อหน้าต่างเบราว์เซอร์แคบลงหรือเข้าถึงได้โดยโทรศัพท์มือถือเมนูการนำทางจะกลายเป็นเมนูแบบเลื่อนลงของปุ่ม ภาพการทำซ้ำ:
รหัส HTML:
<ul>
<li> <a href = "#"> ปุ่ม </a> </li>
<li> <a href = "#"> ปุ่ม </a> </li>
</ul>
</av>
รหัส jQuery:
ผ่านรหัส jQuery ต่อไปนี้ <div id = menu-icon> จะถูกเพิ่มลงใน <nav id = nav_wrap> เมื่อคุณคลิก #menu-icon เมนูจะปรากฏขึ้น:
<script type = "text/javaScript" src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js "> </script"> "
<script type = "text/javascript">
$ (เอกสาร) .ready (ฟังก์ชั่น ($) {
/ * ไอคอนเมนูล่วงหน้า */
$ ('#nav-wrap'). prepend ('<div> เมนู </div>');
/ * สลับ Nav */
$ ("#menu-icon") บน ("คลิก", function () {
$ ("#nav"). slidetoggle ();
$ (นี่) .TogGleClass ("ใช้งาน");
-
-
</script>
การดูองค์ประกอบผ่านเบราว์เซอร์สามารถดูรหัสที่แสดงใน HTML ดังนี้:
<av>
<div> เมนู </div>
<ul>
<li> <a href = "#"> ปุ่ม </a> </li>
<li> <a href = "#"> ปุ่ม </a> </li>
</ul>
</av>
รหัส CSS:
ในรหัส CSS ให้ตั้งค่าแอตทริบิวต์ของ #menu-icon เพื่อแสดง: ไม่มี;, จากนั้นใช้การสืบค้นสื่อเพื่อตัดสินการสืบค้นสื่อแล้วเปลี่ยน #menu-icon เพื่อแสดง: block; ต่อไปนี้เป็นรหัสสไตล์คีย์ CSS เพื่อกำหนดสไตล์เมื่อความกว้างของเบราว์เซอร์น้อยกว่า 600px:
เอฟเฟกต์สุดท้ายคือการเรนเดอร์ครั้งแรกในบทความ