แบบฟอร์มคำติชม HTML พร้อมรายการแบบเลื่อนลง แบบฟอร์ม HTML การจัดกลุ่มรายการ
ในกระบวนการสร้างเว็บไซต์หรือบล็อกและเติมเนื้อหาเพิ่มเติมด้วยเหตุผลหลายประการบางครั้งจำเป็นต้องซ่อนข้อความบางส่วนวางข้อมูลจำนวนมากมากขึ้นในบล็อกที่ซ่อนอยู่ในขณะนี้ แต่ยังคงระบุถึง ผู้ใช้มีสิ่งอื่นที่มีอยู่ และให้โอกาสเขาในการดูเนื้อหาที่ซ่อนอยู่โดยไม่ต้องย้ายไปยังบรรทัดหรือหน้าถัดไป
ก่อนหน้านี้มีการใช้จาวาสคริปต์จำนวนหนึ่งเพื่อนำโซลูชันดังกล่าวไปใช้ แต่ตอนนี้ทั้งหมดนี้สามารถทำได้ง่ายมากโดยใช้คุณสมบัติที่น่าทึ่ง
วันนี้เราจะมาดูวิธีที่ง่ายที่สุดในการสร้างบล็อกเนื้อหาที่ซ่อนอยู่บนหน้าไซต์และในแต่ละข้อความที่เปิดขึ้นเมื่อคุณคลิกที่องค์ประกอบข้อความบางอย่าง โดยใช้คุณสมบัติ CSS3 โดยเฉพาะ สวิตช์อาจเป็นคำเดียว วลีที่ไฮไลต์ ทั้งประโยค หรือไอคอนที่ให้ข้อมูล
บล็อกดังกล่าวมักใช้กับหน้าเว็บที่มีเนื้อหาจำนวนมากเพื่อให้มีโครงสร้างและกะทัดรัดยิ่งขึ้น เนื้อหาทั้งหมดจะถูกแบ่งออกเป็นกลุ่มที่เรียกว่าซึ่งผู้ใช้จะนำเสนอเฉพาะส่วนหัวเท่านั้น ข้อความทั้งหมดจะถูกซ่อนตามค่าเริ่มต้น และสามารถดูได้ด้วยการคลิกไปที่องค์ประกอบเฉพาะ (ดูด้านบน)
มาลองทำโดยไม่ต้องใช้น้ำโดยไม่จำเป็น ดูกลไกง่ายๆ ทั้งหมดนี้พร้อมตัวอย่างที่ชัดเจน และคุณสามารถแก้ไขบางอย่างได้หากต้องการ:
ตัวอย่างหมายเลข 1
ข้อความที่ไม่ได้เลือกและไม่ได้ทำเครื่องหมายจะถูกใช้เป็นสวิตช์สำหรับบล็อกแบบเลื่อนลงพร้อมข้อมูลเพิ่มเติมพร้อมคำเชิญที่ชัดเจนให้คลิกซึ่งคุณต้องทำโดยไม่ต้องกลัวหรือสงสัยที่จะเห็น)))
อย่างที่คุณเห็นทุกอย่างทำงานได้อย่างสมบูรณ์แบบเนื้อหาที่ซ่อนอยู่จะปรากฏขึ้นโดยไม่มีปัญหาและหายไปด้วยการคลิกเมาส์เบา ๆ และในขณะเดียวกันเราก็ใช้โค้ดปฏิบัติการขั้นต่ำสุดทั้งในกรอบงาน html และในรูปแบบ ของสไตล์ CSS โดยไม่ต้องเชื่อมต่อไลบรารีจาวาสคริปต์เพิ่มเติม โดยไม่ต้องกังวลว่าไลบรารีเหล่านั้นจะถูกปิดใช้งานจากฝั่งผู้ใช้หรือไม่
การดำเนินการทั้งหมดนี้เป็นไปได้ด้วยคลาสหลอก CSS3 :ตรวจสอบแล้วใช้กับองค์ประกอบอินเทอร์เฟซ เช่น ปุ่มตัวเลือก () สิ่งที่เราทำจริงในแท็ก เรากำหนดแอตทริบิวต์ type ให้กับช่องทำเครื่องหมาย value รวมถึงตัวระบุ id="hd-1" ที่สอดคล้องกับตัวระบุที่ไม่ซ้ำกัน สำหรับ = "hd-1"สวิตช์บล็อกปัจจุบัน เราจะซ่อนช่องทำเครื่องหมายอย่างละเอียดและตลอดไปโดยการตั้งค่าการแสดงผล: ไม่มีคุณสมบัติใน class.hide
จริงๆ แล้ว ไม่มีอะไรพิเศษที่จะอธิบายที่นี่ กลไกทั้งหมดในการเปิดและปิดบล็อกที่ซ่อนอยู่ประกอบด้วยสามองค์ประกอบ:
- ช่องทำเครื่องหมาย - แท็ก ด้วยความหมาย ช่องทำเครื่องหมายคุณลักษณะ พิมพ์และมีตัวระบุการเชื่อมโยงเฉพาะ
- ชื่อเรื่อง (สวิตช์ข้อความ) - แท็ก ด้วยค่าตัวระบุที่ไม่ซ้ำกันสำหรับแอตทริบิวต์ สำหรับ, (ตัวระบุจะต้องเหมือนกับตัวระบุแท็ก ป้อนข้อมูลด้วยความหมาย ช่องทำเครื่องหมายคุณลักษณะ พิมพ์).
- บล็อกเนื้อหาคือแท็ก div ซึ่งจะมีเนื้อหาที่ซ่อนอยู่ต่างๆ จนกระทั่งถึงเวลาที่ดีขึ้น จนกว่าผู้ใช้จะคลิก (ข้อความ รูปภาพ ฯลฯ)
ฉันหวังว่าจากคำอธิบายที่วุ่นวายของฉัน มันก็ชัดเจนว่าประเด็นทั้งหมดคืออะไร CSS ใช้สไตล์ใหม่ (โดยใช้ pseudo-class ตรวจสอบแล้ว) เพื่อแสดงบล็อกเนื้อหาที่ถูกซ่อนไว้ก่อนหน้านี้เฉพาะเมื่อผู้ใช้คลิกที่องค์ประกอบที่เชื่อมโยงกับช่องทำเครื่องหมายด้วยตัวระบุที่ไม่ซ้ำกัน
จากทั้งหมดนี้เป็นไปตามนี้ โน๊ตสำคัญ:
เมื่อคุณใช้บล็อกที่ซ่อนอยู่หลายบล็อกในหน้าเดียวกัน ปุ่มตัวเลือกแต่ละปุ่มจะต้องมีรหัสเฉพาะซึ่งจะแตกต่างจากรหัสในบล็อกอื่นๆ
ดังนั้น เราได้แยกแยะแล้วว่าอะไรไปที่ไหนและทำไม ตอนนี้เรามาดูกรอบงาน html ของโครงสร้างทั้งหมดกันดีกว่า:
| < input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >คลิกที่นี่เพื่อเปิด! < div>เนื้อหาที่ซ่อนอยู่...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >คลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม! < div>เนื้อหาที่ซ่อนอยู่... |
ต่อไปเราจะย้ายโดยตรงไปยังการสร้างสไตล์ CSS โดยที่การออกแบบทั้งหมดนี้จะไม่ทำงาน โค้ดขั้นต่ำสุดโดยไม่มีการตกแต่งใดๆ เพียงเน้นพื้นหลังของบล็อกแบบเลื่อนลงเล็กน้อยเพื่อกำหนดให้คุณและแสดงกรอบของข้อความที่ซ่อนอยู่ คุณสามารถออกแบบบล็อกตามที่คุณต้องการ เพิ่มเส้นขอบ มุมมน ไฮไลต์ข้อความ หรือ
1.ซีเอสเอส
| . ซ่อน, . ซ่อน + ป้ายกำกับ ~ div ( จอแสดงผล: ไม่มี; ) /* ประเภทข้อความป้ายกำกับ */. ซ่อน + ป้ายกำกับ, . ซ่อน: เลือกแล้ว + ป้ายกำกับ (ช่องว่างภายใน: 0; สี: สีเขียว; เคอร์เซอร์: ตัวชี้; ขอบด้านล่าง: 1px จุดสีเขียว; ) ซ่อน: เลือก + ป้ายกำกับ + div ( แสดง: บล็อก; พื้นหลัง: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; การขยาย: 10px; ) |
/* ซ่อนช่องทำเครื่องหมายและบล็อกเนื้อหา */ .hide, .hide + label ~ div ( display: none; ) /* ลักษณะข้อความของป้ายกำกับ */ .hide + label, .hide:checked + label ( padding: 0; สี: สีเขียว ; เคอร์เซอร์: ตัวชี้; border-bottom: 1px dotted green; ) /* ลักษณะของข้อความป้ายกำกับเมื่อสวิตช์ทำงาน */ .hide: ตรวจสอบแล้ว + label ( สี: สีแดง; border-bottom: 0; ) /* เมื่อ ช่องทำเครื่องหมายใช้งานอยู่ แสดงบล็อกที่มีเนื้อหา */ .hide:checked + label + div ( display: block; พื้นหลัง: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; กล่อง-เงา: สิ่งที่ใส่เข้าไป 3px 3px 10px #7d8e8f; การขยาย: 10px; )
สำหรับตัวอย่างนักพรตทั้งหมดนี้เป็นเพียงขั้นต่ำที่เพียงพอ แต่เราจะไม่เป็นเราเลยหากเราไม่เพิ่มสิ่งดีๆ เข้าไป และเป็นการดีกว่าถ้าบอกผู้ใช้ด้วยสายตาว่าจะคลิกตรงไหน
ในตัวอย่างที่สอง ฉันเพิ่มสัญลักษณ์ง่ายๆ ในรูปแบบของเครื่องหมายบวก ซึ่งระบุอย่างชัดเจนว่ามีอย่างอื่นซ่อนอยู่ที่นี่ เมื่อกด มันจะเปลี่ยนเป็นเครื่องหมายลบทันที และฉันเพิ่มแอนิเมชั่นเล็กน้อยลงในบล็อกที่ซ่อนอยู่พร้อมเนื้อหาเมื่อ พวกมันปรากฏขึ้นและทั้งหมดนี้ได้รับความช่วยเหลือจาก CSS3 โดยเฉพาะ
2.ซีเอสเอส
| /* ซ่อนช่องทำเครื่องหมายและบล็อกเนื้อหา */. ซ่อน, . ซ่อน + ป้ายกำกับ ~ div ( จอแสดงผล: ไม่มี; ) /* ประเภทข้อความป้ายกำกับ */. ซ่อน + ป้ายกำกับ ( ระยะขอบ: 0; ช่องว่างภายใน: 0 ; สี: สีเขียว; เคอร์เซอร์: ตัวชี้; จอแสดงผล: อินไลน์บล็อก; ) /* ลักษณะของข้อความป้ายกำกับเมื่อสวิตช์ทำงาน */. ซ่อน: เลือกแล้ว + ป้ายกำกับ ( สี: แดง ขอบ- ล่าง: 0 ; ) /* เมื่อช่องทำเครื่องหมายทำงานอยู่ ให้แสดงบล็อคที่มีเนื้อหา */. ซ่อน: เลือก + ป้ายกำกับ + div ( แสดง: บล็อก; พื้นหลัง: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f;ระยะขอบซ้าย: 20px;ช่องว่างภายใน: 10px; /* มีภาพเคลื่อนไหวเล็กน้อยเมื่อปรากฏ */- webkit- แอนิเมชั่น: จางหายง่าย - ใน 0.5 วินาที; - moz- แอนิเมชั่น: จางหายไป- ใน 0.5 วินาที; แอนิเมชั่น: จางหายไป- ใน 0.5 วินาที; ) /* ภาพเคลื่อนไหวเมื่อบล็อกที่ซ่อนอยู่ปรากฏขึ้น */@- moz- คีย์เฟรมจางลง ( จาก ( ความทึบ: 0 ; ) ถึง ( ความทึบ: 1 ) ) @- webkit- คีย์เฟรมจางลง ( จาก ( ความทึบ: 0 ; ) ถึง ( ความทึบ: 1 ) ) @ คีย์เฟรมจาง ( จาก ( ความทึบ: 0 ; ) ถึง ( ความทึบ: 1 ) ) ซ่อน + ป้ายกำกับ: ก่อน ( สีพื้นหลัง: #1e90ff; สี: #fff; เนื้อหา: " \002 บี"; จอแสดงผล: บล็อก; ลอย: ซ้าย; ขนาดตัวอักษร: 14px; น้ำหนักตัวอักษร: ตัวหนา; ความสูง: 16px; ความสูงของบรรทัด: 16px; ระยะขอบ: 3px 5px; จัดข้อความ: กึ่งกลาง; ความกว้าง: 16px; - webkit- เส้นขอบ- รัศมี: 50%; - moz- เส้นขอบ- รัศมี: 50%; รัศมีชายแดน: 50%; ) . ซ่อน: เลือกแล้ว + ป้ายกำกับ: ก่อน ( เนื้อหา: " \221 2" ; } |
/* ซ่อนช่องทำเครื่องหมายและบล็อกเนื้อหา */ .hide, .hide + label ~ div ( display: none; ) /* ลักษณะข้อความของป้ายกำกับ */ .hide + label ( Margin: 0; padding: 0; color: green; cursor : pointer; display: inline-block; ) /* ลักษณะของข้อความป้ายกำกับเมื่อสวิตช์ทำงานอยู่ */ .hide:checked + label ( color: red; border-bottom: 0; ) /* เมื่อช่องทำเครื่องหมายทำงานอยู่ ให้แสดง บล็อกที่มีเนื้อหา */ . Hide:checked + label + div ( จอแสดงผล: block; พื้นหลัง: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* แอนิเมชั่นเล็กน้อยเมื่อปรากฏ */ -webkit-animation:fade easy-in 0.5s; -moz-animation:fade Ease -ใน 0.5 วินาที ภาพเคลื่อนไหว: จางหายไปใน 0.5 วินาที; ) /* ภาพเคลื่อนไหวเมื่อบล็อกที่ซ่อนอยู่ปรากฏขึ้น */ @-moz-keyframes จางหายไป ( จาก ( ความทึบ: 0; ) ถึง ( ความทึบ: 1 ) ) @-webkit-keyframes จางหายไป ( จาก ( ความทึบ: 0 ; ) ถึง ( ความทึบ: 1 ) ) @keyframes จางหายไป ( จาก ( ความทึบ: 0; ) ถึง ( ความทึบ: 1 ) ) .hide + label:before ( สีพื้นหลัง: #1e90ff; สี: #fff; เนื้อหา: "\002B"; จอแสดงผล: บล็อก; ลอย: ซ้าย; ขนาดตัวอักษร: 14px; น้ำหนักตัวอักษร: ตัวหนา; ความสูง: 16px; ความสูงของบรรทัด: 16px; ระยะขอบ: 3px 5px; การจัดแนวข้อความ: กึ่งกลาง; ความกว้าง: 16px; -webkit-เส้นขอบ-รัศมี: 50%; -moz-เส้นขอบรัศมี: 50%; รัศมีชายแดน: 50%; ) .hide:checked + label:before ( เนื้อหา: "\2212"; )
ตามบัญชีทั้งหมดวิธีนี้เป็นสิ่งที่ดีอย่างไม่ต้องสงสัย แต่เช่นเคยและไม่น่าแปลกใจเลยที่ปัญหาเกิดขึ้นกับการเบรกอย่างต่อเนื่องในความคืบหน้าเบราว์เซอร์ IE คลาสหลอก ตรวจสอบแล้วรองรับเฉพาะเวอร์ชัน 9 และใหม่กว่าของเบราว์เซอร์นี้ สำหรับ IE เวอร์ชันเก่า ทุกอย่างยังคงเหมือนเดิม คุณจะต้องใช้จาวาสคริปต์
การใช้ช่องทำเครื่องหมายที่ซ่อนอยู่ทำให้คุณสามารถใช้บล็อกที่มีสไตล์ แถบเลื่อน แกลเลอรี และอื่นๆ อีกมากมายได้อย่างง่ายดาย
ด้วยความเคารพ แอนดรูว์
คำอธิบาย
แท็ก HTML
องค์ประกอบ
ความกว้างของเมนูแบบเลื่อนลงจะถูกกำหนดโดยข้อความที่ยาวที่สุดที่ระบุในแท็ก