หีบเพลง W3.CSS

คลิกที่ปุ่ม "ส่วนเปิด" ด้านล่างเพื่อดูว่าหีบเพลงทำงานอย่างไร:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link 1 Link 2 Link 3

Accordion with Images:

French Alps

หีบเพลง

หีบเพลงใช้เพื่อแสดง (และซ่อน) เนื้อหา HTML

ใช้ คลาส w3-hideเพื่อซ่อนเนื้อหาหีบเพลง

ใช้ปุ่มประเภทใดก็ได้เพื่อเปิดและปิดเนื้อหา:

ตัวอย่าง

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Open Section 1</button>

<div id="Demo1" class="w3-container w3-hide">
<p>Some text..</p>
</div>

<script>
function myFunction(id) {
  var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
} else {
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

ทั้งองค์ประกอบที่ใช้เปิดหีบเพลงและเนื้อหาของหีบเพลงสามารถเป็นองค์ประกอบ HTML ใดก็ได้

หีบเพลงกับ Dropdown

ตารางนี้แสดงความแตกต่างระหว่างหีบเพลงกับดรอปดาวน์:

หีบเพลง	หล่นลง
เนื้อหาผลักเนื้อหาของหน้าลง	เนื้อหาวางทับเนื้อหาหน้าที่มีอยู่
เนื้อหามักจะกว้าง 100%	เนื้อหากว้าง 160px (ค่าเริ่มต้น)
มักใช้เปิดหลายส่วน	มักใช้เปิดส่วนเดียว

หีบเพลง

Link 1 Link 2 Link 3

ดรอปดาวน์

ปุ่มหีบเพลง

คุณสามารถใช้องค์ประกอบ HTML ใด ๆ เพื่อเปิดเนื้อหาหีบเพลง เราต้องการปุ่มที่มี คลาส w3-blockเพื่อขยายความกว้างทั้งหมดของหน้า (ความกว้าง 100%)

จำไว้ว่าปุ่มใน W3.CSS จะอยู่กึ่งกลางตามค่าเริ่มต้น ใช้ คลาส w3-left-alignหากคุณต้องการให้จัดชิดซ้ายแทน อย่างไรก็ตาม คุณไม่จำเป็นต้องปฏิบัติตามแนวทางของเรา หีบเพลงจะดูดีไม่ว่าจะด้วยวิธีใด:

Lorem ipsum...

Centered content as well!

ตัวอย่าง

<button onclick="myFunc('Demo1')" class="w3-button">
Normal button</button>

<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align w3-green">
Left aligned and full-width</button>

<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo3')" class="w3-btn w3-block w3-red">
Centered and full-width</button>

<div id="Demo3" class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>

ปุ่มหีบเพลงที่ใช้งาน

ใช้ JavaScript เพื่อเน้นหีบเพลงที่เปิดอยู่ (คลิกที่):

Some text..

Some other text..

ตัวอย่าง

// Add the w3-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-red";
} else {
x.className = x.className.replace("w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}

ความกว้างของหีบเพลง

โดยค่าเริ่มต้น ความกว้างของบล็อกคือ 100% หากต้องการแทนที่สิ่งนี้ ให้เปลี่ยนคุณสมบัติความกว้าง CSS ของคอนเทนเนอร์หีบเพลง:

Some text..

ตัวอย่าง

เนื้อหาหีบเพลง

หีบเพลงที่มีลิงก์:

ลิงค์ 1 ลิงค์2 ลิงค์ 3

ตัวอย่าง

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 3</a>
</div>

หีบเพลงเป็นรายการ:

Jill
อีฟ
อดัม

ตัวอย่าง

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
    <li>Jill</li>
    <li>Eve</li>
    <li>Adam</li>
</ul>
</div>

หีบเพลงภายในแถบด้านข้าง (คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับแถบด้านข้างในภายหลัง):

ตัวอย่าง

<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div id="demoAcc" class="w3-hide">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
    <a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
    <div id="demoDrop" class="w3-dropdown-content">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
</div>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

หีบเพลงเคลื่อนไหว

ใช้คลาส w3-animate- เพื่อเฟด ซูม หรือเลื่อนในเนื้อหาหีบเพลง:

Link 1 Link 2 Link 3

ตัวอย่าง

❮ ก่อนหน้า ถัดไป ❯

W3.CSS

W3.CSS สี

การสร้างเว็บ

ตัวอย่าง

อ้างอิง

หีบเพลง W3.CSS

หีบเพลง

ตัวอย่าง

หีบเพลงกับ Dropdown

หีบเพลง

ดรอปดาวน์

ปุ่มหีบเพลง

ตัวอย่าง

ปุ่มหีบเพลงที่ใช้งาน

ตัวอย่าง

ความกว้างของหีบเพลง

ตัวอย่าง

เนื้อหาหีบเพลง

หีบเพลงที่มีลิงก์:

ตัวอย่าง

หีบเพลงเป็นรายการ:

ตัวอย่าง

หีบเพลงภายในแถบด้านข้าง (คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับแถบด้านข้างในภายหลัง):

ตัวอย่าง

หีบเพลงเคลื่อนไหว

ตัวอย่าง