เมนูแบบเลื่อนลงมักพบในการพัฒนาของฉัน แต่ไม่จำเป็นต้องเขียนโครงการอีกครั้ง แม้ว่ามันจะง่าย แต่ลำบากมากในการปรับเปลี่ยน แต่ฉันก็ยังค่อนข้างขี้เกียจ วันนี้ฉันมีเวลาจัดเมนูในการพัฒนาโครงการก่อนหน้านี้และเขียนเวอร์ชันทั่วไป ฉันไม่จำเป็นต้องลำบากในอนาคต
คุณสมบัติ
เมนูที่รวบรวมในวันนี้ได้รับการพัฒนาโดย jQuery+CSS พร้อมคุณสมบัติดังต่อไปนี้:
1. ความเก่งกาจที่แข็งแกร่ง
มีปัญหาเกี่ยวกับเมนูแบบเลื่อนลงที่ฉันใช้มาก่อนและจำเป็นต้องตั้งค่าการนำทางหลักและเมนูย่อยต้องตั้งค่าแยกต่างหาก ตัวอย่างเช่นเมนูระดับที่สองคือ class = "first_menu" เมนูระดับที่สามคือ class = "second_menu" ... และอื่น ๆ มีปัญหาเกี่ยวกับวิธีการเขียนนี้ซึ่งก็คือไม่เอื้อต่อโปรแกรมเมอร์ที่ทำหน้าที่วนรอบ เมนูนี้จำเป็นต้องแนะนำสไตล์ CSS โดยไม่จำเป็นต้องกำหนดเมนูหลายระดับ
2. คำแนะนำการดึงลงอัตโนมัติที่สวยงาม
ในอดีตเราจะเพิ่มคลาสแบบเลื่อนลงในเมนูแบบเลื่อนลงด้วยตนเอง ตอนนี้เราจำเป็นต้องกำหนดรูปแบบของเอฟเฟกต์แบบเลื่อนลงใน CSS และรหัสจะมองหาเมนูแบบเลื่อนลงโดยอัตโนมัติและเพิ่มลูกศรตัวบ่งชี้
3. โทรง่าย ๆ
รายการเอาต์พุตโปรแกรมเมอร์นั้นง่ายและไม่จำเป็นต้องมีการตัดสินมากนักเพียงโทรหาเมนูข้อมูลซ้ำ
ทำให้สำเร็จ
1. รหัส HTML
ก่อนอื่นเราเอาต์พุตข้อมูลเมนูบนหน้าซึ่งประกอบด้วย UL และ LI เพื่อสร้างรายการเมนู รหัสโครงสร้างเฉพาะมีดังนี้:
<ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> เมนูหนึ่ง </a> <ul> <li> <a href = "#"> รถไฟเหาะ </a> </li> <li> นก </a> </li> </li> </li> <li> <a href = "#"> เมนูสอง </a> <ul> <li> <a href = "#"> เกี่ยวกับเรา </a> <ul> <li> <a href = "#" href = "#"> เกิดและนิรันดร์ </a> </li> <li> <a href = "#"> href = "#"> ประสบความสำเร็จ </a> </li> </li> </li> <li> <a href = "#"> ฐานข้อมูล </a> <ul> href = "#"> การเข้ารหัสข้อมูล </a> </li> <li> <a href = "#"> การสร้างแบบจำลองข้อมูล </a> </li> </li> </li> <li> <a href = "#"> c กล้อง </a> </li> </li>
รหัส HTML พื้นฐานบางอย่างนั้นง่ายและไม่จำเป็นต้องอธิบายความหมายของรหัส พวกเขาเน้นโครงสร้างรหัส: ไม่ว่าจะเป็นระดับที่สองระดับที่สามหรือเมนูระดับหลายระดับส่วนใหญ่ซ้อน UL; ชื่อแผ่นสไตล์ก็เป็นโสดมากและเมนูย่อยคือสไตล์ "sub_menu" ซึ่งเอื้อต่อการโทรรหัสโปรแกรม
2. สไตล์ CSS
รหัสสไตล์ CSS นั้นง่ายมากรหัสเฉพาะมีดังนี้:
A {การกำหนดข้อความ: ไม่มี; } ul, li {list-style: none; มาร์จิ้น: 0; Padding: 0; }/*เมนูคำจำกัดความ*/. menue li {พื้นหลัง:#111; สี: #FFF; ความสูง: 30px; ระดับความสูง: 30px; ตำแหน่ง: ญาติ; ลอย: ซ้าย; มาร์จิ้น-ขวา: 5px; ความกว้าง: 100px; TEXT-ALIGN: CENTER; Font-Family: Arial, Helvetica, Sans-Serif; } .MENUE Li A {color: #FFF; ขนาดตัวอักษร: 14px; แสดง: บล็อก; }/* สไตล์เมนูแบบเลื่อนลง*/ul.sub_menu {ตำแหน่ง: Absolute; Width: 100px; แสดง: ไม่มี; z-index: 999; } .MENUE LI UL.SUB_MENU LI {พื้นหลัง: ไม่มี; สี:#555; ขนาดตัวอักษร: 12px; ขอบด้านล่าง: 1px #333 ของแข็ง; ตำแหน่ง: ญาติ; ความกว้าง: 100px; ความสูง: 30px; } .MENUE LI UL.SUB_MENU LI.LAST {ขอบด้านล่าง: ไม่มี; } /*JS จะเพิ่มคลาสนี้ใน Li สุดท้ายลบเอฟเฟกต์ด้านล่างของขอบด้านล่าง* /. menue li ul.sub_menu li a {พื้นหลัง:#222; สี:#888; จอแสดงผล: บล็อก; ความสูง: 30px; } .MENUE LI UL.SUB_MENU LI A: HOVER, .MENUE LI UL.SUB_MENU LI A.NOW {พื้นหลัง:#f90; สี: #FFF;}. menue li.now, .MENUE li.current {พื้นหลัง:#f60; สี: #FFF;} ความเป็นมา: URL (Arrow.png) ไม่ถูกต้องซ้ำ Padding-Right: 15px;}/*ลูกศรนำทางหลักลดลง*/. menue li a.hasmenu {พื้นหลัง: url (arrow.png) ไม่ซ้ำแล้วซ้ำอีก; Padding-Right: 15px; ตำแหน่งพื้นหลัง: ขวา -30px;}/*ลูกศรเมนูแบบเลื่อนลงถูกต้อง*/. menue li ul.sub_menu li a.hasmenu {พื้นหลัง:#222 url (Arrow.png) repeat ด้านบน} ไม่ต้องทำซ้ำด้านบนขวา;}. menue li ul.sub_menu li a.hasmenu: โฮเวอร์ {พื้นหลัง:#f90 url (arrow.png) ไม่ต้องทำซ้ำด้านบนขวา; สี: #ffff;}ที่นี่ฉันจะเน้นสองข้อควรระวังเท่านั้น:
1. ความแตกต่างระหว่างสัมบูรณ์และสัมพัทธ์ในตำแหน่ง
Absolute: การวางตำแหน่งสัมบูรณ์, CSS ถูกเขียนเป็น "ตำแหน่ง: สัมบูรณ์;" และการวางตำแหน่งของมันแบ่งออกเป็นสองสถานการณ์ดังนี้:
A. หากไม่ได้ตั้งค่าด้านบน, ขวา, ล่างและซ้ายค่าเริ่มต้นคือจุดเดิมตาม "จุดดั้งเดิมของพื้นที่เนื้อหา" ของผู้ปกครอง
B. มีหลายกรณีที่ตั้งค่าด้านบนขวาล่างและซ้าย มีสองสถานการณ์ดังนี้:
(1). ผู้ปกครองไม่มีแอตทริบิวต์ตำแหน่งและมุมบนซ้ายของเบราว์เซอร์ (เช่นร่างกาย) อยู่ในตำแหน่งเป็น "จุดพิกัดดั้งเดิม" ตำแหน่งจะถูกกำหนดโดยคุณลักษณะด้านบนขวาล่างและซ้าย
(2). ผู้ปกครองมีแอตทริบิวต์ตำแหน่งและ "จุดประสานงานดั้งเดิมของผู้ปกครอง" เป็นจุดดั้งเดิม
สัมพัทธ์: การวางตำแหน่งสัมพัทธ์, CSS ถูกเขียนเป็น "ตำแหน่ง: ญาติ;", อ้างถึง "พื้นที่เนื้อหาต้นฉบับพื้นที่เนื้อหา" ของผู้ปกครองเป็นจุดดั้งเดิมและไม่มีพาเรนต์ "จุดดั้งเดิมของพื้นที่เนื้อหา" ของร่างกายเป็นจุดเดิม ตำแหน่งจะถูกกำหนดโดยคุณลักษณะด้านบนขวาล่างและด้านซ้ายและมีฟังก์ชั่นของ "การยืดหรือครอบครองความสูง"
ความแตกต่างสองประการข้างต้นมีความสำคัญมากและเป็นเทคนิคที่พบบ่อยมาก คุณต้องแยกแยะพวกเขา ฉันเสียเวลาไปกับการพัฒนาและพบปัญหามากมาย ในความเป็นจริงมันเกิดจากคุณลักษณะทั้งสองนี้
2. ใช้ตำแหน่งพื้นหลัง
บางครั้งเพื่อปรับปรุงความเร็วของเว็บไซต์และอำนวยความสะดวกในการจัดการเว็บไซต์เรามักจะวางรูปภาพขนาดเล็กที่ใช้กันทั่วไปในภาพขนาดใหญ่ เมื่อ CSS ต้องการภาพขนาดเล็กที่สอดคล้องกันก็สามารถทำได้ด้วยวิธีนี้ ตราบใดที่เราเข้าใจว่ามันหมายถึงอะไรมันสะดวกมากที่จะโทร วิธีนี้อธิบายว่าจุดสีขาวคือฟังก์ชั่นการสกัดกั้นภาพและรายละเอียดการใช้งานมีดังนี้:
ไวยากรณ์:
ตำแหน่งพื้นหลัง: ความยาว || ความยาว
ตำแหน่งพื้นหลัง: ตำแหน่ง || ตำแหน่ง
ค่า:
ความยาว: เปอร์เซ็นต์ | ค่าความยาวประกอบด้วยหมายเลขจุดลอยตัวและตัวระบุหน่วย
ตำแหน่ง: ด้านบน | ศูนย์ ด้านล่าง | ซ้าย | ศูนย์ ขวา
ภาพประกอบ:
ตั้งค่าหรือดึงตำแหน่งภาพพื้นหลังของวัตถุ ต้องระบุคุณสมบัติภาพพื้นหลังก่อน การวางตำแหน่งแอตทริบิวต์นี้ไม่ได้รับผลกระทบจากการตั้งค่าแอตทริบิวต์แพทช์ (การขยาย) ของวัตถุ ค่าเริ่มต้นคือ: 0% 0% ในเวลานี้ภาพพื้นหลังจะถูกวางไว้ที่มุมซ้ายบนของพื้นที่เนื้อหาที่วัตถุไม่รวมถึงแพทช์ (ช่องว่างภายใน) หากระบุค่าเดียวเท่านั้นค่าจะถูกใช้สำหรับพิกัดแนวนอน การกำหนดจะเริ่มต้นเป็น 50% หากระบุสองค่าค่าที่สองจะใช้สำหรับการจัดระเบียบ หากค่าถูกตั้งค่าเป็นศูนย์ขวาเนื่องจากค่าแกนแนวนอนจะแทนที่ค่ากลางภาพพื้นหลังจะอยู่ในตำแหน่งทางด้านขวา นี่คือสมการบางอย่าง
ซ้ายบนซ้ายด้านซ้ายเทียบเท่ากับ 0% 0%
ด้านบนตรงกลางด้านบนตรงกลางด้านบนเท่ากับ 50% 0%
ด้านบนขวาบนขวาเทียบเท่ากับ 100% 0%
ซ้าย, ซ้ายตรงกลาง, ศูนย์ซ้ายเทียบเท่ากับ 0% 50%
ศูนย์กลางศูนย์กลางเทียบเท่ากับ 50% 50%
ขวาตรงกลางขวาตรงกลางด้านขวาเทียบเท่ากับ 100% 50%
ด้านล่างซ้ายด้านล่างซ้ายเทียบเท่ากับ 0% 100%
ด้านล่างกึ่งกลางด้านล่างกึ่งกลางด้านล่างเทียบเท่ากับ 50% 100%
ด้านล่างขวาด้านล่างขวาเทียบเท่ากับ 100% 100%
3. รหัส JS
เมนูนี้ขึ้นอยู่กับ jQuery ดังนั้นก่อนอื่นคุณต้องแนะนำฐานรหัส jQuery จากนั้นเขียนรหัส JS ต่อไปนี้เพื่อใช้เมนูแบบเลื่อนลง
<สคริปต์ src = "js/jQuery.min.js"> </script> <script> $ (เอกสาร). พร้อม (ฟังก์ชั่น () {// ตั้งค่าไฮไลต์เริ่มต้นสำหรับการนำทางไม่มีอะไรเกี่ยวข้องกับเมนูนี้ $ ("ul.menue li.meeme_li: eq (0)") Underscore $ (". sub_menu") ค้นหา ("Li: Last-Child") AddClass ("Last") // transf ทั้งหมด LI เพื่อตรวจสอบว่ามีการรวม submenu หรือไม่ if ($ (this) .find ("ul"). ความยาว! = 0) {$ (นี่) .find ("a: แรก"). addclass ("hasmenu")}}) // $ (". menue li"). hover () {$ (นี้) Menu.find ("Ul.sub_menu: First"). show ();}, function () {$ (นี่) Submenu.css ({ซ้าย: "100px", top: "0px"}) $ (". sub_menu li"). hover (function () {$ (นี่) .find ("a: first"). addclass ("ตอนนี้") $ (นี้) $ (this) .find ("A: First"). RemoveClass ("Now") $ (นี่) .find ("UL: First"). ซ่อน ()});/*เมนู jQuery สิ้นสุด*/}) </script>ผ่านขั้นตอนข้างต้นเมนูหลายระดับทั่วไปจะรับรู้ รหัสข้างต้นคือการสะสมของการพัฒนาประจำวันของฉัน เนื่องจากระดับที่ จำกัด ของฉันอาจมีข้อผิดพลาดมากมาย ฉันหวังว่าเพื่อนร่วมงานของฉันจะวิพากษ์วิจารณ์และแก้ไขหรือเสนอรหัสที่ดีที่สุดสำหรับการอ้างอิงของฉัน ขอบคุณ
รหัสการใช้งานด้านบนของเมนูดรอปดาวน์ Universal Infinitus เป็นเนื้อหาทั้งหมดที่ฉันได้แชร์กับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น