เมนูแนวตั้งพร้อมกับภาพพื้นหลังในแบบโรลโอเวอร์

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

เราทบทวนเช่นนี้และขยายตัวเพิ่มสองคุณสมบัติที่สำคัญของเมนูนี้ : การปรับปรุงการเข้าถึงได้ผ่านการใช้กระสุนและประสิทธิภาพที่ดีขึ้นในแง่ของการออกแบบ

ที่นี่ผลที่เราต้องการที่จะได้รับของ :

ในตัวอย่างหน้าจอของตัวชี้เมาส์จะหยุดนิ่งในการเชื่อมโยงที่สองในเมนู

ภาพสองภาพเหล่านี้ถูกนำมาใช้ตัวอย่างเช่นเพื่อให้ชื่อและที่ menu_2.gif menu_1.gif :

ที่ขนาด (150X22 พิกเซล) ได้รับการตัดเพื่อความกว้างของกล่อง, ขนาดตัวอักษรและช่องว่างภายในที่กำหนดให้แต่ละรายการได้

ผมขอเชิญผู้อ่านในการสร้างภาพที่กำหนดเองเพื่อรูปแบบและมิติที่เกี่ยวข้องกับการความต้องการของ

การปฏิบัติ Let's, จุดเริ่มต้นในการวาดเมนู เราจะวิเคราะห์โค้ด HTML :

 id="menu"> <div



    



 <ul>



        



 <li> <a href="#"> Page 1 </ a> </ li>



        



 <li> <a href="#"> Page 2 </ a> </ li>



        



 <li> <a href="#"> Page 3 </ a> </ li>



        



 <li> <a href="#"> Page 4 </ a> </ li>



        



 <li> <a href="#"> Page 5 </ a> </ li>



    



 </ ul>







 </ div>

เมนูทั้งหมดจะถูกในช่องทำเครื่องหมาย"เมนู"ซึ่งในเราจะสร้างรายการหัวข้อย่อยที่มีการเชื่อมโยง

ไม่ได้กำหนดรหัสใด ๆ และชั้นเรียนเพื่อเชื่อมโยงไปยังที่ใด ๆ ของรายการเมนู (รายการ, รายการการเชื่อมโยง) ไม่อยู่เพียงผู้เดียวในการวินิจฉัยโดยการทำรังขององค์ประกอบ

ดังต่อไปนี้ CSS พร้อมด้วยข้อสังเกตที่เหมาะสม :

 / * สุกใส generically แท็ก div * /









 p







 {



    



 font - size : 10px;



    



 font - family : Verdana;







 }









 / * กําหนดพื้นหลังและความกว้างของช่องในเมนู * /









 เมนู #







 {



    



 พื้นหลัง : # CCDDEE;



    



 กว้าง : 150px;







 }









 / * ลบรูปแบบที่เริ่มต้นจากแท็ก UL ที่มีอยู่ในเมนู * /









 UL # เมนู







 {



    



 margin : 0px 0px 0px 0px;



    



 รายการแบบชนิด : none;







 }









 / * รายการสุกใสในเมนู * /









 # เมนูจะ







 {



    



 margin : 0px 0px 0px 0px;



    



 ขอบล่าง : 1px solid # FFFFFF;







 }









 / * กำหนดรูปแบบของการเชื่อมโยงในรายการของเมนู * /









 # เมนู Li, พวกเขา : โฉบ







 {



    



 display : block;



    



 ตำแหน่ง : ญาติ;



    



 ตกแต่งข้อความ : none;



    



 สี : # 192939;



    



 font - น้ำหนัก : หนา;



    



 padding : 5px 5px 5px 5px;







 }









 / * ตั้งค่าพื้นหลังของการเชื่อมโยงโดยค่าเริ่มต้นและการโพสต์ * /









 เมนู # มีการ







 {



    



 พื้นหลังภาพ : url (menu_1.gif);







 }







 เมนู # จะ : โฉบ







 {



    



 พื้นหลังภาพ : url (menu_2.gif);







 }

การดำเนินงานของการทำรังขององค์ประกอบดังกล่าวข้างต้นให้แน่ใจว่ากระสุนเท่านั้นที่จะปรากฏขึ้นพร้อมกับ stylization นี้เป็นเมนูที่เป็นผลของการทำรังภายในกล่องด้วย ID ที่เมนู"."

ทั้งหมดสัญลักษณ์แสดงหัวข้อย่อยอื่น ๆ ของเว็บไซต์จะมีวิธีการของการเริ่มต้นหรือได้รับมอบหมายอย่างชัดเจนผ่านทาง CSS