วิธีที่จะทำให้หล่นลงเมนู CSS

การเรียนการสอน

อันดับแรกให้เข้าใจในสิ่งที่เป็นเมนูแบบเลื่อนลง ภายใต้คำนิยามนี้ได้รับจำนวนมากของวิธีการที่แตกต่างกันการสร้างรูปแบบที่แตกต่างกัน ในกรณีนี้เราจะวิเคราะห์โครงสร้างที่ประกอบด้วยรายการที่ปรากฏอย่างต่อเนื่องหลายแห่งและหลายเพิ่มเติม (ซ่อน) ขอจบด้วยทฤษฎีและการเริ่มต้นที่จะปฏิบัติ

• เราสร้างรูปแบบของเมนูของเรา การทำเช่นนี้การติดฉลากแบบ HTML รหัส สร้างรายการที่ซ้อนกัน:
  • • < / ul> บางอย่างเช่นนี้ควรมีลักษณะเช่นเมนูแบบเลื่อนลงของคุณ CSS ที่จะเข้าไปแทรกแซงในภายหลัง ในกรณีนี้รายการหลักประกอบด้วยสามพื้นที่หลักและสองปิดล้อม
    • ซ่อนเมนูย่อย สำหรับวันนี้เราใช้สไตล์ชีตที่กำหนดคุณสมบัติดังต่อไปนี้: UL ยู {display: none;} นี้จะลบองค์ประกอบของรายการที่สองจากหน้าจอ
    • สร้าง CSS เมนูแบบเลื่อนลงจากรายการหลัก แผ่น cascading สไตล์การเขียนกฎต่อไปนี้: li UL: โฉบยู {display: บล็อก;} รายการนี้หมายความว่าเมื่อเมาส์อยู่เหนือ li องค์ประกอบซึ่งตั้งอยู่ในรายการยูจะปรากฏขึ้นบนหน้าจอยู (ที่แนบมา) อย่างรวดเร็วก่อนที่โครงการดังกล่าวอาจจะดูเหมือนซับซ้อนและสับสน แต่ในความเป็นจริงทุกอย่างเป็นเรื่องง่ายมาก
    • ใช้รูปแบบนี้ด้วยตัวเองโดยการใส่แท็ก
    • เนื้อหาของคุณ คุณสามารถเปลี่ยนจำนวนขององค์ประกอบของรายการ

    การเปลี่ยนแปลงของตกแต่งบ้าน

    เร็วที่สุดเท่าที่รูปแบบเมนูหลักพร้อมคุณสามารถดำเนินการลงทะเบียน อาจจะจำนวนมากในสถานที่แรกที่ยินดีที่จะได้รับการกำจัดของเครื่องหมายที่ระบุรายการสินค้า นี้จะกระทำโดยใช้ CSS คุณสมบัติเดียวคือรูปแบบรายการประเภท คุณต้องเพิ่มรายการต่อไปนี้: li {รูปแบบรายการประเภท: none;} จากนั้นคุณสามารถใส่กรอบและทำให้ พื้นหลัง ชายแดนและพื้นหลังช่วยให้คุณมีนี้ บางทีบางคนจะไม่ชอบเมนูแบบเลื่อนลงจะปรากฏเป็นรายการเพิ่มเติมผลักดันที่องค์ประกอบพื้นฐานที่เหมือนกัน เพื่อแก้ไขปัญหานี้คุณสามารถวางตำแหน่ง การทำเช่นนี้ cascading สไตล์ชีตเขียนรายการต่อไปนี้: UL ยู {position: absolute; ซ้าย: 15px; ขวา: 15px; ด้านบน: 15px; ด้านล่าง: 15px;} แน่นอนค่าที่คุณจะใช้ของคุณเอง ทั้งนี้ขึ้นอยู่กับสถานที่ที่คุณต้องการที่จะเห็นเมนูแบบเลื่อนลง, CSS จะมีคุณสมบัติอื่น ๆ อีกมากมายที่สามารถเพิ่มผลกระทบต่างๆและตกแต่งรายการของเรา

    ข้อสรุป

    อีกครั้งหนึ่งที่มันเป็นมูลค่า noting ก่อสร้างของรูปแบบเมนู ในการกำหนดกฎ CSS ที่ใช้ในกรณีที่ค่าฝังตัวนี้เช่น, UL UL ถ้าคุณอยู่ในเอกสารที่จะตอบสนองโครงสร้างคล้ายกันอื่น ๆ อาจจะมีปัญหาใหญ่ ในสถานการณ์เหล่านี้คุณจำเป็นต้องใช้เพื่อวัตถุประสงค์เฉพาะตัวอย่างเช่นตัวเลือกหรือ ID-ID เมนูแบบเลื่อนลงรูปแบบบทความข้างต้นถูกออกแบบมาเพื่อทำความเข้าใจการออกแบบทั่วไป ส่วนที่เหลือของการทำงานที่วางอยู่บนไหล่ของคุณ