jQuery : เมนูแบบเลื่อนลงที่มีผลภาพนิ่ง
หน้า 1 จาก 2
ในบทความสั้น ๆ นี้ฉันปัจจุบัน jQuery ปลั๊กอินของฉันเพื่อสร้างง่ายๆ แต่หล่นลงดีเมนู (เมนูแบบเลื่อนลง) มีผลบังคับใช้ภาพนิ่ง ในความเป็นจริงฉันจะต้องซื่อสัตย์ไม่ได้เป็นทุกงานของฉันเอง ... การทำงานของฉันในความเป็นจริงเป็นจริง reworking ของ ปลั๊กอินนี้ ที่ฉันได้รับอนุญาตให้เพิ่มประสิทธิภาพและขยายได้โดยการเพิ่มในความเป็นจริงภาพนิ่งที่มีผล (คลี่คลาย)
ลองมาดูวิธีการใช้เมนูแบบเลื่อนลง
ครั้งแรกของหลักสูตรเราจำเป็นจะต้องรวม jQuery ในหน้าเว็บของเรา :
<script type="text/javascript" src="jquery.js"> </ script>
โดยไม่ต้องนี้เราจะต้องสร้างในร่างกายเอกสาร (ร่างกาย ...</ <body>>), เมนูของเราซึ่งประกอบด้วยรายการที่มีสัญลักษณ์ในการที่มีรายการอื่น ๆ (คิดเป็นเส้นเอ็นที่เป็น"ม้วนออกเพื่อครอบ"ที่ เกี่ยวกับแม่เลื่อนรายการ) ที่นี่โค้ดตัวอย่างคือ
id="mrwddm"> <ul
<li> <a href="/"> comfortpianostudio.com </ a> </ li>
<li> <a href="#"> JavaScript </ a>
<ul>
<li> <a href="/javascript/guide/"> คู่มือ </ a> </ li>
<li> <a href="/javascript/articoli/"> บทความ </ a> </ li>
<li> <a href="/javascript/faq/"> </ a> </ li>
</ ul>
</ li>
พระคัมภีร์ <li> <a href="#"> </ a>
<ul>
<li> <a href="/script/applet-java/"> จาวา </ a> </ li>
<li> <a href="/script/javascript/"> JavaScript </ a> </ li>
<li> <a href="/script/script-php/"> PHP </ a> </ li>
<li> <a href="/script/script-aspnet/"> ASP.Net </ a> </ li>
</ ul>
</ li>
<li> <a href="http://forum.comfortpianostudio.com/"> ฟอรั่ม </ a> </ li>
<li> <a href="http://blog.comfortpianostudio.com/"> บล็อก </ a> </ li>
<li> <a href="http://tools.comfortpianostudio.com/"> เครื่องมือ </ a> </ li>
</ ul>
เมนูของเราจะต้องมีแน่นอนสุกใสอย่างเหมาะสม การทำเช่นนี้เพียงเพิ่มบรรทัดเหล่านี้ในรูปแบบแผ่นรหัส CSS :
UL # mrwddm {margin : 40px 0px 20px 0px; padding : 0px;}
# Mrwddm li {ลอย : ด้านซ้าย; แสดง : inline; รายการ - style : none;}
# Mrwddm พวกเขา {display : block; padding : 3px 10px; ขอบ : 0px; ตกแต่งข้อความ : none; พื้นที่สีขาว : nowrap; พื้นหลัง : # EEEEEE;}
# Mrwddm พวกเขา : {background : # CCCCCC; สี : # FFFFFF;} เลื่อน
# Mrwddm พวกเขา UL {นาทีขนาดกว้าง : 120px; ขอบ : 3px 0px 0px 0px; padding : 0px; position : absolute; z - index : 999; :; การมองเห็นจอแสดงผลที่ซ่อน : none;}
# Mrwddm พวกเขา UL li {ลอย : none; แสดง : inline;}
# Mrwddm พวกเขา UL Li {padding : 3px 5px; พื้นหลัง : # EEEEEE; สี : # 666666;}
# Mrwddm พวกเขา UL Li : โฉบ {background : # CCCCCC; สี : # FF6600}
 |
CSS (หลักสูตร)
การออกแบบเว็บและการใช้งานตาม W3C CSS และ XHTML เริ่มต้นจาก 29 € |
 |
HTML (หลักสูตร)
ภาษามาร์คอัปสำหรับเว็บจาก 29 € |
 |
Javascript (หลักสูตร)
คู่มือที่สมบูรณ์ในการเขียนสคริปต์ฝั่งไคลเอนต์ จาก 39 € |