เอฟเฟกต์การเน้นเมนูเป็นวิธีการออกแบบที่มักใช้ในทุกหน้าเว็บ ซึ่งสามารถแจ้งให้ผู้ใช้ทราบได้อย่างมีประสิทธิภาพว่าตนอยู่ในคอลัมน์ใดอยู่ นี่เป็นวิธีที่ฉันใช้บ่อยเช่นกัน โดยทั่วไป หน้าเว็บจะมีเมนูอย่างน้อยสองระดับ อย่างแรกคือเมนูแถบนำทางทั่วไปที่ด้านบน และอีกอันคือเมนูการนำทางหมวดหมู่ทางด้านซ้าย โดยทั่วไปแล้ว จำเป็นต้องบันทึกสถานะปัจจุบันในเมนูระดับที่สองด้วยเมื่อเมนูระดับแรกถูกไฮไลต์
หากพื้นที่ส่วนหัวที่มีเมนูด้านบนได้รับการแก้ไข นั่นคือไม่จำเป็นต้องโหลดซ้ำทุกครั้ง ในกรณีนี้สามารถนำไปใช้งานได้อย่างง่ายดายโดยใช้ CSS หรือ JS ล้วนๆ แต่วันนี้ฉันจะไม่พูดถึงเรื่องนี้ สิ่งที่เรากำลังพูดถึงในวันนี้คือเมนูระดับแรกและเมนูระดับที่สองถูกโหลดแบบไดนามิกในแต่ละหน้า นั่นคือโหลดเป็นการควบคุมของผู้ใช้ ในกรณีนี้ การบันทึกสถานะที่ไฮไลต์ของเมนูเป็นเรื่องยาก
แน่นอนคุณอาจบอกว่าคุณสามารถใช้คุกกี้เพื่อบันทึกสถานะที่ไฮไลต์ล่าสุดที่บันทึกไว้เมื่อโหลดแต่ละหน้าได้ ใช่ สามารถบันทึกได้จริง แต่วิธีนี้จะทำให้เกิดปัญหาในแอปพลิเคชันที่ซับซ้อนบางตัวที่มีหน้าย่อยจำนวนมาก สร้างความสับสนและปัญหาให้กับผู้ใช้มากมาย ตัวอย่างเช่น ในระหว่างวงจรชีวิตคุกกี้ เมื่อเปิดโครงการอีกครั้ง วงจรชีวิตคุกกี้ยังไม่สิ้นสุดอย่างสมบูรณ์ นอกจากนี้ยังบันทึกสถานะที่บันทึกไว้ล่าสุด และที่อยู่ของเพจมีการเปลี่ยนแปลงในขณะนี้ ดังนั้นเมนูที่ไฮไลต์ในปัจจุบัน เพจจึงชี้ไป ไม่ใช่สิ่งที่ผู้ใช้ต้องการเห็น การปฏิบัติได้พิสูจน์แล้วว่าไม่ว่าคุณจะกำหนดวงจรชีวิตของคุกกี้นี้นานเท่าใด ก็ไม่สามารถแก้ปัญหาผู้ใช้ที่รีเฟรชหน้าเว็บโดยประสงค์ร้ายได้อย่างสมบูรณ์แบบ นี่เป็นสิ่งที่เลวร้ายจริงๆ!
มีวิธีที่ดีกว่าในการแก้ไขสถานการณ์นี้หรือไม่?
คำตอบคือใช่ เรารู้ ว่าวิธีที่ดีที่สุดในการแก้ปัญหานี้คือการตั้งค่าสไตล์ไฮไลต์ของเมนูปัจจุบันอย่างชัดเจนตามที่อยู่ URL ของเพจเมื่อโหลดแต่ละเพจ วิธีนี้ช่วยแก้ปัญหาประเภทนี้ได้อย่างสมบูรณ์แบบ และด้วยวิธีนี้ ไม่ว่าผู้ใช้จะคลิกปุ่มรีเฟรชโดยประสงค์ร้ายเพียงใด สถานะที่ไฮไลต์ยังคงไม่เปลี่ยนแปลง เมื่อคุณรู้หลักการแล้ว การนำไปปฏิบัติก็จะง่ายขึ้นมาก
ชั้นโครงสร้าง
ชั้นโครงสร้างเมนูระดับแรก:
จะเห็นได้ว่าในเมนูระดับแรกนี้ ที่อยู่ลิงก์โดยทั่วไปไม่มีค่าพารามิเตอร์ เลเยอร์โครงสร้างของเมนูรอง:
แตกต่างจากเมนูระดับแรก เราเพิ่มค่าพารามิเตอร์สองตัวให้กับที่อยู่ลิงก์ในเมนูระดับที่สอง พารามิเตอร์ pId ชี้ไปที่หมายเลขซีเรียลของเมนูระดับแรกด้านบน และ sId คือหมายเลขลำดับของ เมนูนั่นเอง เราตั้งค่า ID ที่แตกต่างกันสองรายการสำหรับคอนเทนเนอร์ทั้งหมด ul ของสองเมนูนี้ จำเป็นต้องถูกเรียกใน JS ดังนั้นจึงต้องไม่พลาด
เลเยอร์สไตล์
เกี่ยวกับสไตล์นั้น จริงๆ แล้วไม่มีอะไรพิเศษเกี่ยวกับมัน คุณสามารถตั้งค่าให้เป็นสไตล์ที่คุณต้องการได้ สิ่งเดียวที่ต้องสังเกตก็คือ เราจำเป็นต้องตั้งค่าสไตล์สถานะทั้งสามของเมนูไฮไลต์แยกกันสำหรับการโทรแบบไดนามิกโดย JS .
/*การตั้งค่าสามสไตล์สำหรับเมนูระดับแรก*/
#menu li a.normal{พื้นหลัง:#fff;}//รูปแบบปกติ
#menu li a.over{พื้นหลัง:#00ff00;} //สไตล์การกลิ้ง
#menu li a.cur{พื้นหลัง:#ff0000;color:#fff;} // รูปแบบไฮไลต์
/*การตั้งค่าสามสไตล์สำหรับเมนูรอง*/
#othermenu li a.normal{พื้นหลัง:#fff;} //รูปแบบปกติ
#othermenu li a.over{พื้นหลัง:#AA7F00;color:#fff;} // สไตล์การกลิ้ง
#othermenu li a.cur{พื้นหลัง:#7F0000;color:#fff;} // รูปแบบไฮไลต์