สร้างเมนูแบบเลื่อนลงแบบไดนามิกด้วย jQuery

บทช่วยสอนนี้จะอธิบายทีละขั้นตอนวิธีใช้ JQuery และ CSS เพื่อสร้างเมนูไดนามิกสุดเจ๋ง ฟีเจอร์ "เขียนให้น้อยลง ทำมากขึ้น" ของ jQuery นั้นเป็นที่รู้จักกันดีสำหรับทุกคน แม้แต่คนที่ไม่มีประสบการณ์ด้านการเขียนโปรแกรม JS ก็สามารถเรียนรู้วิธีใช้งานได้อย่างรวดเร็วผ่าน API ที่มีให้ แน่นอนว่า หากคุณมีประสบการณ์ ฉันก็ยังแนะนำอย่างนั้น คุณสามารถเข้าใจหลักการใช้งานของแต่ละฟังก์ชั่นหลักของ jQuery ต่อไปอย่าพูดถึงเรื่องอื่นเลย เรามาดูวิธีใช้งานเพื่อให้ได้เอฟเฟกต์มหัศจรรย์ของเมนูกัน

คุณสามารถคลิก เพื่อดูการสาธิต หรือ ดาวน์โหลดซอร์สโค้ด

ขั้นตอนที่ 1 - โครงสร้าง HTML

ลองดูโค้ด HTML ของเมนู มันไม่ต่างจากโค้ดเมนูปกติ:

<div id="เมนู" class="เมนู">
<ul>
<li><a href="javascript:;">หน้าแรก</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">จาวาสคริปต์</a></li>
<li><a href="javascript:;">ทรัพยากร</a></li>
<li><a href="javascript:;">บทช่วยสอน</a></li>
<li><a href="javascript:;">เกี่ยวกับ</a></li>
</ul>
</div>

สิ่งสำคัญคือการใช้สคริปต์เพื่อสร้างเลเยอร์แยกกันหลายเลเยอร์ในแต่ละจุดยึด (องค์ประกอบ) เพื่อให้สามารถควบคุมให้เคลื่อนไหวแยกกันเมื่อวางเมาส์ไว้ ในการดำเนินการนี้ เราจำเป็นต้องแก้ไขโครงสร้างของ DOM เมื่อโหลด DOM เพื่อให้แต่ละโค้ด Anchor กลายเป็นดังนี้:

<a href="จาวาสคริปต์:;">
<span class="out">บ้าน</span>
<span class="bg"></span>
<span class="over">หน้าแรก</span>
</a>

เนื้อหาในจุดยึดดั้งเดิมแต่ละจุดจะถูกต่อท้ายกับองค์ประกอบ span สองรายการ (.out และ .over) และอีกองค์ประกอบ span (.bg) คือเลเยอร์ภาพพื้นหลัง

สำหรับวิธีการแก้ไขโครงสร้าง DOM นั้น โค้ด JS จะอธิบายไว้ในขั้นตอนที่ 3

ขั้นตอนที่ 2 - สไตล์ CSS

ในตัวอย่าง มีการแสดงสองสไตล์ รูปแบบหนึ่งมีภาพพื้นหลังและอีกรูปแบบไม่มีภาพพื้นหลัง (ดูรายละเอียดในการสาธิต) คุณยังสามารถปรับแต่งสไตล์ของคุณเองได้อย่างอิสระเพื่อออกแบบเมนูที่เจ๋งกว่าอีกด้วย : :

/* ต่อไปนี้เป็นรูปแบบพื้นฐานของเมนู
*/.menuulli{
ลอย: ซ้าย;
/* เนื้อหาขององค์ประกอบย่อยของเมนูอยู่นอกเหนือการมองเห็น */
ล้น: ซ่อนเร้น;
/* รหัสบางส่วนถูกละไว้ด้านล่าง*/
-
.menu ul li {
/* ต้องเป็นตำแหน่งที่สัมพันธ์กัน */
ตำแหน่ง: ญาติ;
จอแสดงผล: บล็อก;
ความกว้าง: 110px;
/* รหัสบางส่วนถูกละไว้ด้านล่าง*/
-
.menu ul li ช่วง {
/* ทุกเลเยอร์จะใช้ตำแหน่งที่แน่นอน */
ตำแหน่ง: แน่นอน;
ซ้าย: 0;
ความกว้าง: 110px;
-
.menu ul li a span.out {
ด้านบน: 0px;
-
.menu ul li a span.over,.menu ul li a span.bg {
/* ในตอนแรก เลเยอร์ .over และ .bg จะอยู่ที่ -45px สัมพันธ์กับองค์ประกอบเพื่อให้ได้เอฟเฟกต์ที่ซ่อนอยู่*/
ด้านบน: -45px;}/
*ต่อไปนี้เป็นตัวอย่างการใช้ภาพพื้นหลัง*/
#เมนู {
/*พื้นหลังเมนู*/
พื้นหลัง: url (bg_menu.gif) เลื่อน 0 -1px ซ้ำ-x;
เส้นขอบ: 1px ทึบ #CCC;}
#menu ul li {
สี: #000;
-
#menu ul li a span.over {
สี: #FFF;
-
#menu ul li span.bg {
/* ระบุความสูงและภาพพื้นหลัง*/
ความสูง: 45px;
พื้นหลัง: url(bg_over.gif) ตรงกลาง ไม่ทำซ้ำ;
-

คุณยังสามารถปรับแต่งสไตล์ CSS ด้วยตัวเอง และยังมีสไตล์เวอร์ชันที่เรียบง่ายให้ไว้ที่นี่ด้วย ( ดูตัวอย่าง )