เข้ากันได้อย่างสมบูรณ์กับเมนูการพับบัฟเฟอร์รองที่เน้นสีได้

ช่วงนี้ฉันค่อนข้างยุ่งและไม่ได้ดูแลบล็อกของฉันมาหลายเดือนแล้ว ตอนนี้ฉันจะจัดเรียงตัวอย่างเมนูที่เพิ่งสร้างในโครงการและแบ่งปัน

เลย์เอาต์ที่ใช้บ่อยที่สุดในแบ็กเอนด์หรือระบบ OA มักจะเป็นเลย์เอาต์แบบเต็มหน้าจอ ซึ่งโดยทั่วไปจะเป็นเลย์เอาต์ที่มีสามแถวและสองคอลัมน์ที่ด้านบน กลาง และล่าง โดยมีส่วนหัว ส่วนท้าย เมนูด้านซ้าย และกรอบ iframe หน้าทางด้านขวา ดังนั้นจึงมักใช้เมนูรองแบบพับได้ ตัวอย่างนี้คือการใช้เมนูการพับบัฟเฟอร์รองที่เข้ากันได้อย่างสมบูรณ์และเน้นได้ทั่วไป

คุณสมบัติ :

1. เข้ากันได้อย่างสมบูรณ์ ทดสอบเบราว์เซอร์แล้ว: IE5.5, IE6, IE7, IE8, FF3.0, Google, Safari 4.0, Opera9.0
2. โครงสร้าง Html มีความสง่างามและกระชับ โดยไม่มีแท็กซ้ำซ้อน ซึ่งเอื้อต่อการเขียนโปรแกรมเอาท์พุตลูป
3. สไตล์และโครงสร้างจะแยกจากกัน และคุณสามารถแก้ไขสไตล์ต่างๆ ในสไตล์ชีตได้
4. รายการที่เลือกในปัจจุบันสามารถไฮไลต์ได้ทั้งเมนูระดับแรกและเมนูระดับที่สอง
5. แอนิเมชั่นบัฟเฟอร์ที่สวยงามของชั้นพับ
6. เหมาะที่สุดสำหรับแบ็กเอนด์และอินเทอร์เฟซระบบ OA บางส่วน

ข้อบกพร่อง :

1. ไม่รองรับการต่อต้านการรีเฟรช ฟังก์ชันนี้ไม่ควรมีประโยชน์มากนักในระบบแอปพลิเคชันเบื้องหลัง ดังนั้นจึงไม่ได้เพิ่มฟังก์ชันนี้
2. เอฟเฟกต์บัฟเฟอร์ไม่ปรากฏใน IE6 สำหรับ IE6 เอฟเฟกต์จะลดลง

3. เรามาพูดคุยสั้นๆ เกี่ยวกับแนวคิดง่ายๆ และปัญหาที่พบในการทำเมนูดังกล่าวกันดีกว่า

   โดยทั่วไป เมื่อสร้างเอฟเฟกต์ กระบวนการผลิตของฉันคือการวาดเนื้อหาของเลเยอร์โครงสร้าง HTML ก่อน จากนั้นจึงเขียนสไตล์ จากนั้นจึงเพิ่มไอซิ่งลงบนเอฟเฟกต์เค้ก เช่น เอฟเฟกต์พิเศษ JS เป็นต้น ฉันไม่รู้ว่าผู้เชี่ยวชาญมีโมเดลกระบวนการอะไร

   ชั้นโครงสร้าง :

   แนวคิดของเลเยอร์โครงสร้างโดยทั่วไปจะขึ้นอยู่กับความเข้าใจในการรับรู้ โดยปกติจะมีการเรนเดอร์ และจากการเรนเดอร์นี้ โครงสร้าง HTML ที่กระชับที่สุดจะถูกสร้างขึ้น ดังที่แสดงในภาพด้านบน ความประทับใจแรกที่ปรากฏคือการใช้รายการ UL ที่ไม่เรียงลำดับ แต่... นี่เป็นรายการที่ซ้อนกันสองระดับ นี่เป็นประเด็นแรกที่เราต้องพิจารณา

   ดังนั้นโครงสร้างควรมีลักษณะดังนี้:

   เมื่อมีเมนูระดับที่สอง จะเป็นโครงสร้าง UL ที่ซ้อนกัน เมื่อไม่มีเมนูระดับที่สองจะเป็นดังนี้:

   <ul class="เมนู">
   <li><a href="#none">รายการเมนูระดับแรก</a></li>
   </ul>

   แน่นอน คุณยังสามารถใช้วิธีเรียงลำดับรายการ dl-dt-dd เพื่อสร้างโครงสร้างแบบซ้อนนี้ ขึ้นอยู่กับสถานการณ์จริงของคุณ

   ด้วยเลเยอร์โครงสร้างที่เป็นต้นฉบับที่สุด คุณจะต้องเพิ่ม hooks ที่จำเป็นสำหรับ CSS และ JS เพื่อควบคุมสไตล์และเอฟเฟกต์ ฉันมักจะต่อต้านวิธีการเพิ่มชื่อคลาสจำนวนมากซึ่งจะเพิ่มขนาดของหน้าเป็นส่วนใหญ่ คล่องตัว วิธีการคือการใช้ชื่อคลาสที่จำเป็นหนึ่งหรือสองชื่อกับคอนเทนเนอร์หลัก จากนั้นใช้ตัวเลือกลูก (กลุ่ม) เพื่อตั้งค่าส่วนบุคคลต่างๆ ในสไตล์ชีต ในโครงสร้างข้างต้น คุณคิดว่าจะใช้ชื่อคลาสกี่ชื่อเพื่อกำหนดสไตล์ทั้งหมด

   วิธีการของฉันคือใช้ชื่อคลาสเพียงสามชื่อเพื่อควบคุมการแสดงสไตล์ทั้งหมด อันหนึ่งคือ UL ระดับบนสุด ซึ่งกำหนดเป็น class="menu" อีกอันคือคอนเทนเนอร์ของเมนูระดับที่สอง นั่นคือ UL ที่ซ้อนกันจะกำหนด class="level2" และสุดท้ายคือรายการเมนูระดับแรก li กำหนด class="level1" ด้วย hook ทั้งสามนี้ คุณสามารถปรับเปลี่ยนสไตล์ของโครงสร้างทั้งหมดได้

   ชั้นการนำเสนอ :

   การตั้งค่าสไตล์ชีตนั้นง่ายมาก สิ่งเดียวที่ควรทราบคือเพื่ออำนวยความสะดวกให้กับ JS ในการควบคุมการแสดงผลและการปกปิดเมนูรองและบันทึกสถานะไฮไลต์ของรายการที่เลือกในปัจจุบัน ฉันไม่ได้ใช้การหลอกแบบโฮเวอร์ - คลาสเพื่อให้ได้เอฟเฟกต์การเลื่อนเข้าและออกของเมาส์ และใช้ JS เพื่อจำลอง รหัสคีย์สำหรับการควบคุมสไตล์โดยใช้ JS มีดังนี้:

   สไตล์เมนูระดับแรก

   /*เมนูระดับแรกสไตล์สามสถานะ สำหรับการโทร JS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;พื้นหลัง:url(../images/menubg.gif ) ไม่ซ้ำบนซ้าย;}
   .menu li.level1 a.hove {ตำแหน่งพื้นหลัง: ซ้าย -31px;}
   .menu li.level1 a.cur {ตำแหน่งพื้นหลัง: ซ้าย -62px;}

   รูปแบบเมนูรอง

   /*เมนูรองรูปแบบสามสถานะสำหรับการโทร JS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;พื้นหลัง:url(../images/menubg.gif ) ไม่ซ้ำบนซ้าย;}
   .menu li.level1 a.hove {ตำแหน่งพื้นหลัง: ซ้าย -31px;}
   .menu li.level1 a.cur {ตำแหน่งพื้นหลัง: ซ้าย -62px;}

   ชั้นพฤติกรรม :

   ตามที่กล่าวไว้ข้างต้น เรายังไม่ได้กำหนดเอฟเฟกต์สามสถานะของเมนูในสไตล์ชีต ดังนั้นเราจึงจำเป็นต้องผูกเหตุการณ์ onmouseover, onmouseout และ onclick เข้ากับแต่ละรายการเมนูเพื่อจำลองเอฟเฟกต์นี้ ในเลเยอร์โครงสร้าง เราไม่ได้กำหนด ID ของคอนเทนเนอร์ทั้งหมดนี้ แต่กำหนดเพียงชื่อคลาสเท่านั้น ดังนั้นเราจึงเพิ่มเมธอด getElementsByClassName() แบบขยายใน JS (ขอบคุณ Situ Zhengmei เพื่อนของฉัน) เพื่อรับอ็อบเจ็กต์นี้ตามคลาส ชื่อ. ใช้การปิดแบบวนซ้ำเพื่อผูกเหตุการณ์ทั้งสามนี้

   ฉันจะไม่อธิบายโค้ดโดยละเอียดทีละรายการ ความคิดเห็นในการสาธิตมีความชัดเจนมาก โปรดดาวน์โหลดลงในคอมพิวเตอร์ของคุณเพื่อเรียกดู

   หากคุณมีคำถามใด ๆ โปรดโพสต์และพูดคุยในบล็อกนี้ ฉันขอให้คุณมีความสุขในการใช้งาน!

   <li><a href="#none">รายการเมนูระดับแรก</a>
   <ul>
   <li><a href="#none">รายการเมนูระดับที่สอง</a></li>
   </ul>
   </li>