ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSเมนูแบบเลื่อนลง


สร้างแบบเลื่อนลง hoverable กับ CSS


การสาธิต: ตัวอย่างแบบเลื่อนลง

เลื่อนเมาส์เหนือตัวอย่างด้านล่าง:


เลื่อนลงพื้นฐาน

สร้างกล่องแบบหล่นลงที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนเมาส์ไปที่องค์ประกอบ

ตัวอย่าง

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span> Mouse over me </span>
  <div class="dropdown-content">
    <p> Hello World! </p>
  </div>
</div>
ลองตัวเอง»

ตัวอย่างอธิบาย

HTML) ใช้องค์ประกอบใด ๆ ที่จะเปิดเนื้อหาแบบเลื่อนลงเช่น <span> หรือ <button> องค์ประกอบ

ใช้องค์ประกอบภาชนะ (เช่น <div> ) เพื่อสร้างเนื้อหาแบบเลื่อนลงและเพิ่มสิ่งที่คุณต้องการภายในของมัน

ห่อ <div> องค์ประกอบรอบองค์ประกอบที่จะวางตำแหน่งของเนื้อหาแบบเลื่อนลงได้อย่างถูกต้องด้วย CSS

CSS) เดอะ .dropdown ใช้คลาส position:relative ซึ่งเป็นสิ่งจำเป็นเมื่อเราต้องการเนื้อหาแบบเลื่อนลงเพื่อนำไปวางไว้ด้านล่างปุ่มแบบเลื่อนลง (โดยใช้ position:absolute )

.dropdown-content ระดับชูเนื้อหาแบบเลื่อนที่เกิดขึ้นจริง มันถูกซ่อนไว้โดยค่าเริ่มต้นและจะปรากฏบนโฮเวอร์ (ดูด้านล่าง) หมายเหตุ: min-width ถูกตั้งค่าให้ 160px รู้สึกอิสระที่จะเปลี่ยนแปลงนี้เคล็ดลับ:. หากคุณต้องการความกว้างของเนื้อหาแบบเลื่อนลงที่จะเป็นกว้างเป็นปุ่มแบบเลื่อนลงตั้งค่า width ถึง 100% (และ overflow:auto เพื่อเปิดใช้งานเลื่อนบนหน้าจอขนาดเล็ก)

แทนการใช้เส้นขอบเราได้ใช้ CSS3 นี้ box-shadow คุณสมบัติที่จะทำให้เมนูแบบเลื่อนลงมีลักษณะเหมือน "บัตร"

:hover เลือกจะใช้ในการแสดงเมนูแบบเลื่อนลงเมื่อผู้ใช้เลื่อนเมาส์ไปที่ปุ่มแบบเลื่อนลง


เมนูแบบเลื่อนลง

สร้างเมนูแบบเลื่อนลงที่ช่วยให้ผู้ใช้สามารถเลือกตัวเลือกจากรายการที่ใช้งาน:

ตัวอย่างเช่นนี้จะคล้ายกับก่อนหน้านี้หนึ่งยกเว้นว่าเราจะเพิ่มการเชื่อมโยงภายในกล่องแบบเลื่อนลงและรูปแบบให้เหมาะสมกับปุ่มแบบเลื่อนลงสไตล์:

ตัวอย่าง

<style>
/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn"> Dropdown </button>
  <div class="dropdown-content">
    <a href="#"> Link 1 </a>
    <a href="#"> Link 2 </a>
    <a href="#"> Link 3 </a>
  </div>
</div>
ลองตัวเอง»

จัดชิดขวาเนื้อหาแบบเลื่อนลง

หากคุณต้องการเมนูแบบเลื่อนลงไปจากขวาไปซ้ายแทนจากซ้ายไปขวาเพิ่ม right: 0;

ตัวอย่าง

.dropdown-content {
    right: 0;
}
ลองตัวเอง»

ตัวอย่าง

ตัวอย่างเพิ่มเติม

ภาพแบบเลื่อนลง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มภาพและเนื้อหาอื่น ๆ ภายในกล่องแบบเลื่อนลง

เลื่อนลง Navbar
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มเมนูแบบเลื่อนลงภายในแถบนำทาง