4 วิธีในการสร้าง CSS-Only Accordions ที่ยอดเยี่ยม
หีบเพลงเนื้อหาทำให้รูปแบบการออกแบบที่มีประโยชน์ คุณสามารถใช้มันเพื่อสิ่งต่าง ๆ มากมาย: สำหรับเมนูรายการรูปภาพบทความที่ตัดตอนมาบทความตัวอย่างข้อความและแม้แต่วิดีโอ
หีบเพลงส่วนใหญ่ที่นั่นพึ่งพา JavaScript ส่วนใหญ่เกี่ยวกับ jQuery, แต่เนื่องจากการใช้เทคนิค CSS3 ขั้นสูงเริ่มแพร่หลายเราจึงสามารถหาตัวอย่างที่ดีได้ ใช้ HTML และ CSS เท่านั้น, ที่ทำให้สามารถเข้าถึงได้ในสภาพแวดล้อมที่ปิดใช้งาน JavaScript.
การสร้าง CSS-only accordions อาจเป็นงานที่ยุ่งยากดังนั้นในบทความนี้เราจะพยายามทำ เข้าใจแนวคิดหลักที่นักพัฒนาใช้เมื่อต้องการสร้าง.
ในการสร้างแท็บ CSS เท่านั้นโดยปกติจะมีสองวิธีหลักแต่ละแท็กจะมีสองกรณีการใช้งานบ่อย วิธีแรกใช้ องค์ประกอบรูปแบบที่ซ่อนอยู่, ในขณะที่คนที่สองใช้ประโยชน์จาก CSS ตัวเลือกหลอก.
1. วิธีการปุ่มแบบเรดิโอ
วิธีปุ่มแบบเรดิโอเพิ่มการป้อนข้อมูลวิทยุที่ซ่อนอยู่และป้ายกำกับที่สอดคล้องกับแต่ละแท็บของหีบเพลง ตรรกะนั้นง่าย: เมื่อผู้ใช้เลือกแท็บพวกเขาโดยทั่วไปจะตรวจสอบปุ่มตัวเลือกที่เป็นของแท็บนั้นเช่นเดียวกับที่พวกเขากรอกแบบฟอร์ม เมื่อพวกเขาคลิกที่แท็บถัดไปในหีบเพลงพวกเขาเลือกปุ่มตัวเลือกถัดไป ฯลฯ.
ในวิธีนี้, สามารถเปิดได้เพียงแท็บเดียว ในเวลาเดียวกัน. ตรรกะของ HTML มีลักษณะดังนี้:
ชื่อเนื้อหา (อย่าใช้แท็ก h1 ที่นี่)
เนื้อหาบางส่วน ...
p>
คุณจำเป็นต้อง เพิ่มคู่ฉลากวิทยุแยกสำหรับแต่ละแท็บ ในหีบเพลง HTML เพียงอย่างเดียวจะไม่ให้พฤติกรรมที่ต้องการคุณต้องเพิ่มกฎ CSS ที่เหมาะสมด้วยลองมาดูกันว่าคุณจะสามารถทำได้อย่างไร.
แท็บแนวตั้งความสูงคงที่
ในโซลูชันนี้ (ดูภาพหน้าจอด้านล่าง) ผู้พัฒนาซ่อนปุ่มตัวเลือกด้วยความช่วยเหลือของ แสดง: ไม่มี; กฎจากนั้นเขาก็ให้ตำแหน่งสัมพัทธ์กับแท็กป้ายชื่อที่เก็บชื่อของแต่ละแท็บและตำแหน่งที่แน่นอนเพื่อที่สอดคล้องกัน ป้าย: หลังจาก องค์ประกอบหลอก.
หลังถือที่จับที่มีเครื่องหมายสีเขียว + ที่เปิดแท็บ แท็บที่ปิดยังใช้มือจับที่มีเครื่องหมายสีเขียว “-” สัญญาณ ใน CSS แท็บที่ปิดจะถูกเลือกด้วยความช่วยเหลือของตัวเลือกองค์ประกอบ + องค์ประกอบ.
คุณต้องให้ความสูงคงที่กับเนื้อหาของแท็บที่เปิดอยู่ ในการทำเช่นนี้ให้เลือกเนื้อหาของแท็บที่เปิดอยู่ (ทำเครื่องหมายด้วยคลาสเนื้อหาแท็บใน HTML ด้านบน) ด้วยความช่วยเหลือของ element1 ~ element2 CSS selector.
ตรรกะพื้นฐานของ CSS ที่นี่มีดังต่อไปนี้:
อินพุต [type = radio] display: none; label position: relative; จอแสดงผล: บล็อก; label: หลัง content: "+"; ตำแหน่ง: สัมบูรณ์; ขวา: 1em; อินพุต: เครื่องหมาย + ป้ายกำกับ: หลัง เนื้อหา: "-"; อินพุต: ทำเครื่องหมาย ~ .tab-content height: 150px;
คุณสามารถดู CSS แบบเต็มได้ที่นี่ใน Codepen CSS แรกเริ่มนั้นถูกเขียนใน Sass แต่ถ้าคุณคลิกที่ “รวบรวมดูแล้ว” คุณสามารถเห็นไฟล์ CSS ที่คอมไพล์แล้ว.
รูปหีบเพลงที่มีปุ่มตัวเลือก
หีบเพลงภาพที่สวยงามนี้ใช้วิธีการตัวเลือกปุ่มเดียว แต่แทนที่จะเป็นป้ายกำกับนักพัฒนาที่นี่ ใช้แท็ก HTML ของ figcaption เพื่อให้บรรลุพฤติกรรมหีบเพลง.
CSS ค่อนข้างแตกต่างกันส่วนใหญ่เป็นเพราะในกรณีนี้แท็บไม่ได้วางในแนวตั้ง แต่เป็นแนวนอน นักพัฒนาใช้องค์ประกอบ + องค์ประกอบ CSS ตัวเลือก (ที่ใช้ในกรณีก่อนหน้านี้เพื่อเลือกสลับ) เพื่อให้แน่ใจว่าขอบของภาพที่ครอบคลุมยังคงมองเห็นได้.
อ่านคำแนะนำโดยละเอียดเกี่ยวกับวิธีสร้างหีบเพลง CSS ที่หรูหราเท่านั้น.
2. วิธีการช่องทำเครื่องหมาย
วิธีการช่องทำเครื่องหมายใช้ประเภทอินพุตช่องทำเครื่องหมายแทนปุ่มตัวเลือก เมื่อผู้ใช้เลือกแท็บพวกเขาจะเลือกช่องทำเครื่องหมายที่เกี่ยวข้อง.
ความแตกต่างเมื่อเทียบกับวิธีปุ่มตัวเลือกก็คือ เป็นไปได้ที่จะเปิดมากกว่าหนึ่งแท็บในเวลาเดียวกัน, เหมือนเป็นไปได้ที่จะตรวจสอบมากกว่าหนึ่งช่องทำเครื่องหมายภายในแบบฟอร์ม.
ในทางกลับกันแท็บจะไม่ปิดตัวเองเมื่อผู้ใช้คลิกอีกอันหนึ่ง ตรรกะของ HTML นั้นเหมือนกันก่อนหน้านี้ในกรณีนี้คุณต้องใช้ช่องทำเครื่องหมายสำหรับประเภทอินพุต.
ชื่อเนื้อหา (อย่าใช้แท็ก h1 ที่นี่)
เนื้อหาบางส่วน ...
p>
หีบเพลงกล่องความสูงคงที่
หากคุณต้องการแท็บเนื้อหาความสูงคงที่ตรรกะของ CSS นั้นค่อนข้างเหมือนกับในกรณีปุ่มตัวเลือกมันเป็นเพียงแค่ประเภทอินพุตมีการเปลี่ยนแปลงจากช่องทำเครื่องหมายเป็นช่องทำเครื่องหมาย ในปากกา Codepen นี้คุณสามารถดูรหัสได้.
หีบเพลงความสูงของของเหลว
เมื่อเปิดมากกว่าหนึ่งแท็บในเวลาเดียวกันการแสดงแท็บความสูงคงที่อาจส่งผลเสียต่อประสบการณ์การใช้งานของผู้ใช้เนื่องจากความสูงของหีบเพลงสามารถเติบโตได้อย่างมีนัยสำคัญ สิ่งนี้สามารถปรับปรุงได้ถ้าคุณ เปลี่ยนความสูงคงที่เป็นความสูงของเหลว; นั่นหมายถึงความสูงของแท็บที่เปิดอยู่จะขยายหรือหดตามขนาดของเนื้อหาที่พวกเขาถือ.
ในการทำเช่นนั้นคุณต้อง แก้ไขความสูงคงที่ของเนื้อหาแท็บเป็นความสูงสูงสุด, และ ใช้หน่วยที่เกี่ยวข้อง:
อินพุต: ทำเครื่องหมาย ~ .tab-content ความสูงสูงสุด: 50em;
หากคุณต้องการเข้าใจวิธีการทำงานของวิธีนี้ดีขึ้นคุณสามารถดู Codepen นี้ได้.
3. วิธีการ: เป้าหมาย
: target เป็นหนึ่งในตัวเลือกหลอกของ CSS3 ด้วยความช่วยเหลือของมันคุณสามารถเชื่อมโยงองค์ประกอบ HTML กับแท็กจุดยึดด้วยวิธีต่อไปนี้:
ชื่อของแท็บ
เนื้อหาของแท็บ
เมื่อผู้ใช้คลิกที่ชื่อของแท็บส่วนทั้งหมดจะเปิดขอบคุณ : เป้าหมาย ตัวเลือก pseudo และ URL จะถูกเปลี่ยนเป็นรูปแบบต่อไปนี้: www.some-url.com/#tab-1.
แท็บเปิดสามารถจัดรูปแบบใน CSS ด้วยความช่วยเหลือของ ส่วน: เป้าหมาย … กฎ. เรามีการสอนที่ดีเกี่ยวกับ hongkiat เกี่ยวกับวิธีที่คุณสามารถสร้างหีบเพลง CSS ที่ดีเพียงอย่างเดียวกับ : เป้าหมาย วิธีการในรูปแบบทั้งแนวตั้งและแนวนอน.
ข้อบกพร่องหลักของ : เป้าหมาย วิธีการคือ มันเปลี่ยน URL เมื่อผู้ใช้คลิกที่แท็บ. สิ่งนี้มีผลต่อประวัติเบราว์เซอร์และปุ่มย้อนกลับของเบราว์เซอร์จะไม่นำผู้ใช้ไปยังหน้าก่อนหน้า แต่กลับสู่สถานะก่อนหน้าของหีบเพลง.
4. วิธีการ: โฮเวอร์
ข้อบกพร่องหลังนี้สามารถเอาชนะได้หากเราใช้ : เลื่อน CSS pseudo-selector แทน : เป้าหมาย, แต่ในกรณีนี้แท็บจะไม่ตอบสนองต่อการคลิก แต่ต่อเหตุการณ์โฮเวอร์ เคล็ดลับที่นี่คือสิ่งที่คุณต้องการ ซ่อนองค์ประกอบที่ไม่ได้ถูกซ่อนไว้, หรือ ลดความกว้างหรือความสูง - ขึ้นอยู่กับเค้าโครงของแท็บ
องค์ประกอบที่โฮเวอร์ต้องถูกทำให้มองเห็นได้หรือตั้งเป็นความกว้าง / ความสูงเต็มเพื่อให้หีบเพลงทำงาน.
หีบเพลง CSS-only 3 อันต่อไปนี้ถูกสร้างขึ้นด้วยวิธี: hover คลิกที่ลิงค์ด้านล่างของสกรีนช็อตเพื่อดูโค้ด.
หีบเพลงภาพแนวนอน
หีบเพลงที่เบ้
หีบเพลงที่เปิดใช้งานโฮเวอร์พร้อมสถานะเริ่มต้น
