คำอธิบาย

แท็ก ช่วยให้คุณสร้างองค์ประกอบอินเทอร์เฟซในรูปแบบของรายการแบบเลื่อนลง รวมถึงรายการที่มีตัวเลือกเดียวหรือหลายรายการ ดังที่แสดงด้านล่าง การปรากฏครั้งสุดท้ายขึ้นอยู่กับการใช้แอตทริบิวต์ขนาดของแท็ก ซึ่งกำหนดความสูงของรายการ

ความกว้างของรายการถูกกำหนดโดยข้อความที่กว้างที่สุดที่ระบุในแท็ก และยังสามารถเปลี่ยนแปลงได้โดยใช้สไตล์ แต่ละรายการจะถูกสร้างขึ้นโดยใช้แท็ก ซึ่งจะต้องฝังอยู่ในคอนเทนเนอร์ หากคุณวางแผนที่จะส่งข้อมูลรายการไปยังเซิร์ฟเวอร์ คุณจะต้องวางองค์ประกอบไว้ในแบบฟอร์ม นี่ยังจำเป็นเมื่อเข้าถึงข้อมูลรายการผ่านสคริปต์

ไวยากรณ์ รายการ 1 คุณลักษณะ 2 รายการ ช่วยให้คุณสามารถข้ามไปยังรายการโดยใช้แป้นพิมพ์ลัดบางรายการ

ตั้งค่ารายการเพื่อรับโฟกัสหลังจากโหลดเพจแล้ว

บล็อกการเข้าถึงและการแก้ไของค์ประกอบ

เชื่อมโยงรายการกับแบบฟอร์ม

ช่วยให้คุณสามารถเลือกหลายรายการพร้อมกัน

ชื่อขององค์ประกอบที่จะส่งไปยังเซิร์ฟเวอร์หรือเข้าถึงผ่านสคริปต์

• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • จำนวนบรรทัดรายการที่จะแสดง
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa

มุมมองแบบต้นไม้ของรายการ HTML เป็นวิธีที่ดีที่สุดในการตรวจสอบและศึกษาโครงสร้างลำดับชั้นด้วยภาพ เรามาดูการเปลี่ยนแปลงต่างๆ ของรายการ HTML ทั่วไปให้เป็นสถานะเหมือนต้นไม้ที่มองเห็นได้ชัดเจนยิ่งขึ้นโดยใช้ความมหัศจรรย์ของสไตล์ CSS

• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • จำนวนบรรทัดรายการที่จะแสดง
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa

1. ตัวอย่างของรายการ HTML ปกติ

เมนูหลัก

ฐานความรู้
• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • จำนวนบรรทัดรายการที่จะแสดง
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa
ส่วนประกอบ
ปลั๊กอิน
• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • จำนวนบรรทัดรายการที่จะแสดง
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa
รูปแบบรายการ CSS ที่มีเส้นเชื่อมต่อ .treeline, .treeline ul, .treeline li ( margin: 0; padding: 0; line-height: 1.2; list-style: none; ) .treeline ul (margin: 0 0 0 15px; / * การขยายเส้นแนวตั้ง */) .treeline > li:not(:only-child), .treeline li li ( ตำแหน่ง: สัมพันธ์; การขยาย: 3px 0 0 20px; /* การขยายข้อความ */ ) /* รูปแบบเส้นแนวตั้ง */ .treeline li:not(:last-child) ( border-left: 1px solid #ccc;) /* รูปแบบเส้นแนวนอน*/ .treeline li li:before, .treeline > li:not(:only-child):before ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บน: 0; ซ้าย: 0; ความกว้าง: 1.1em; ความสูง: .7em; border-bottom:1px solid #ccc; ) /* บรรทัดแนวตั้งของรายการสุดท้ายในรายการ * / .treeline li:last-child:before ( width: calc(1.1em - 1px); border-left: 1px solid #ccc; ) 3. ตัวอย่างรายการแบบเลื่อนลง HTML
• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • จำนวนบรรทัดรายการที่จะแสดง
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa
มาร์กอัปรายการแบบเลื่อนลง HTML

เราเพิ่ม + ให้กับมาร์กอัปก่อนหน้าเพื่อใช้ฟังก์ชันการขยายองค์ประกอบของรายการต้นไม้

• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • +ฐานความรู้ /* รายการบล็อกส่วนขยาย */
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa
สไตล์ CSS แบบเลื่อนลง

ต้องเพิ่มสไตล์ต่อไปนี้ให้กับ CSS จากตัวอย่างก่อนหน้านี้:

Treeline .drop ( ตำแหน่ง: สัมบูรณ์; ซ้าย: -6px; ด้านบน: 5px; ความกว้าง: 11px; ความสูง: 11px; ความสูงบรรทัด: 1em; การจัดตำแหน่งข้อความ: กึ่งกลาง; พื้นหลัง: #9F9F9F; สี: #fff; /* พื้นหลัง และสีของปุ่มที่เปิดรายการ */ font-size: 78%; /* Size +/- */ cursor: pointer; -webkit-user-select: none; treeline li: ลูกคนสุดท้าย > .drop (ระยะขอบซ้าย: 1px;) .treeline .drop + ul (จอแสดงผล: none;) .treeline .dropM + ul (จอแสดงผล: block;)

สคริปต์ที่ใช้ฟังก์ชันรายการแบบเลื่อนลง

นอกเหนือจาก HTML และ CSS แล้ว วิธีการออกแบบรายการต้นไม้นี้ยังต้องใช้ JS:

$(function() ( var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); สำหรับ (var i = 0; i< ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();

คุณสามารถแทรกโค้ด JS นี้ได้ที่ส่วนท้ายของเนื้อหาโดยไปที่โหมดมุมมองซอร์สโค้ด โปรดทราบว่าโค้ดสคริปต์อาจถูกตัดออกโดยผู้แก้ไข ดังนั้นจึงใช้งานไม่ได้ ในกรณีนี้ ให้ไปที่การตั้งค่าตัวแก้ไขและอนุญาตให้ใช้แท็ก

4. ตัวอย่างรายการต้นไม้แนวตั้ง
• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • จำนวนบรรทัดรายการที่จะแสดง
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa
มาร์กอัป HTML สำหรับรายการต้นไม้แนวตั้ง
/* กำหนดคลาส treevertical */
• จำเป็นต้องเลือกรายการก่อนที่จะส่งแบบฟอร์ม
  • จำนวนบรรทัดรายการที่จะแสดง
    • กำหนดลำดับของการเปลี่ยนแปลงระหว่างองค์ประกอบเมื่อกดปุ่ม Tab ปิด
    • ที่จำเป็น.
    • HTML5 IE Cr Op Sa Fx
  • เลือกแท็ก
  • เลือกฮีโร่ Cheburashka Crocodile Gena Shapoklyak Rat Larisa
รูปแบบ CSS สำหรับรายการต้นไม้แนวตั้ง .treevertical, .treevertical ul ( ตำแหน่ง: สัมพันธ์; จอแสดงผล: ตาราง; ระยะขอบ: 5px 0 0 0 !important; การขยาย: 6px 0 0 0 !important; line-height: ปกติ; text-align: center ; word-wrap: break-word; word-break: break-all;) .treevertical li ( ตำแหน่ง: สัมพันธ์; แสดง: table-cell;) /* เยื้องระหว่างย่อหน้า */ .treevertical li:not(:only-child ) (padding: 0 .5em;).treevertical li:last-child (padding-right: 0;).treevertical li:first-child (padding-left: 0;) /* รูปแบบเส้น */ .treevertical ul:before , .treevertical ul li:before, .treevertical ul li:after ( เนื้อหา: ""; ตำแหน่ง: แน่นอน; บน: -5px; ซ้าย: 0; ความกว้าง: 50%; ความสูง: 5px; ขอบขวา: 1px solid #999 ; ) .treevertical ul:before (บนสุด: -4px;) .treevertical ul li:not(:only-child):before (เส้นขอบบนสุด: 1px solid #999;) .treevertical ul li:not(:only-child ) :first-child:before ( ขวา: 0; ซ้าย: auto; border-left: 1px solid #999; border-right: none;) .treevertical ul li:not(:only-child):first-child:before , .treevertical ul li:not(:only-child):last-child:before ( ความกว้าง: calc(50% + .5em/2); ) .treevertical ul li:after (เส้นขอบ: none;) .treevertical ul li:not(:last-child):not(:first-child):after ( width: 100%; border-top: 1px solid #999; )

แท็กตัวเลือก HTML ใช้เพื่อสร้างรายการแบบเลื่อนลงที่อนุญาตให้ผู้ใช้เลือกหนึ่งตัวเลือกจากชุดค่าที่กำหนดไว้ล่วงหน้า

ข้อความที่ผู้ใช้มองเห็นอาจแตกต่างจากข้อความที่ระบุในแอตทริบิวต์ value ต่อไปนี้เป็นวิธีสร้างรายการแบบเลื่อนลง:

เขียว เหลือง ดำ

• รายการแบบเลื่อนลงถูกสร้างขึ้นโดยใช้แท็ก ;
• ภายในแท็ก ตัวเลือกจะถูกกำหนดสำหรับการเลือกโดยใช้แท็ก
• คุณสามารถใช้แอตทริบิวต์ค่าบนแท็กเพื่อเข้าถึงตัวเลือกที่เลือกโดยใช้ PHP, JS, Jquery ฯลฯ

นอกจากนี้ยังสามารถระบุคลาส CSS แทนการใช้ ID เพื่อจัดรูปแบบรายการแบบเลื่อนลงได้

ในส่วนถัดไป ฉันจะแสดงตัวอย่างการใช้รายการแบบเลื่อนลง HTML ใน JavaScript/JQuery ตัวอย่างจะแสดงวิธีจัดสไตล์โดยใช้ CSS/CSS3 และเฟรมเวิร์ก Bootstrap

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

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




ตัวอย่างข้างต้นใช้มาร์กอัปต่อไปนี้เพื่อสร้างรายการแบบเลื่อนลง:

5 10 15 20 25

การใช้แอตทริบิวต์ค่า

ตามที่กล่าวไว้ก่อนหน้านี้ ค่าของแอตทริบิวต์ value อาจแตกต่างจากข้อความที่แสดงบนเพจ ตัวอย่างเช่น คุณสามารถแสดงชื่อประเทศหรือสีสำหรับผู้ใช้ และใช้รหัสย่อในแอตทริบิวต์ value

ในตัวอย่างต่อไปนี้ เราจะสร้างรายการแบบเลื่อนลงที่มีแอตทริบิวต์ค่า:


ดูการสาธิตและรหัสออนไลน์

รหัสต่อไปนี้ใช้สำหรับแท็ก:

มารูน เขียว เหลือง น้ำเงิน แดง

ตัวอย่างการเข้าถึงตัวเลือกที่เลือกใน JavaScript

ตอนนี้เรามาสร้างตัวอย่างการเข้าถึงค่าของตัวเลือกที่เลือกและดำเนินการบางอย่าง เราสร้างรายการเดียวกันกับตัวอย่างด้านบนพร้อมตัวเลือกสี เมื่อเลือกแล้ว ให้คลิกปุ่มเพื่อใช้สีดังกล่าวกับเอกสาร:


ดูการสาธิตและรหัสออนไลน์

สำหรับค่าตัวเลือก HTML จะใช้รหัสต่อไปนี้:

มารูน เขียว เหลือง น้ำเงิน แดง อื่นๆ

บรรทัดของรหัสต่อไปนี้ใช้ใน JavaScript เพื่อเข้าถึงค่าของแอตทริบิวต์ค่าของตัวเลือก:

var seltheme = document.getElementById("selcolor").value;

เมื่อคลิกปุ่ม ฟังก์ชัน JS จะถูกเรียกใช้ ซึ่งจะกำหนดค่าที่เลือกไว้ในรายการดรอปดาวน์ให้กับตัวแปร ค่านี้ใช้เพื่อใส่สีให้กับเอกสารปัจจุบัน

การเข้าถึงข้อความที่มองเห็นได้ใน JQuery

คราวนี้ ฉันจะใช้ JQuery เพื่อเข้าถึงค่าของตัวเลือกที่เลือก: ทั้งข้อความและค่า ในการสาธิตนี้ ฉันจะเข้าถึงข้อความที่มองเห็นได้ในแท็กตัวเลือกในรูปแบบ HTML:


ดูการสาธิตและรหัสออนไลน์

ในโค้ดสำหรับแต่ละตัวเลือกในแท็ก ค่าจะแตกต่างจากข้อความ เมื่อคุณเลือกสีแล้ว jQuery จะแสดงข้อความที่มองเห็นได้ในการแจ้งเตือน รหัสแท็กมีดังนี้:

มารูน เขียว เหลือง น้ำเงิน แดง

ต่อไปนี้เป็นวิธีการเข้าถึงค่านี้ในตัวเลือก HTML ที่เลือก JavaScript ที่เลือก:

var ที่เลือกสี = $("#jqueryselect option:selected").text();

คุณยังสามารถเข้าถึงค่าโดยใช้ JQuery $.val() วิธีการ:

var ที่เลือกสี = $("#jqueryselect").val();

แทนที่บรรทัดนี้ในตัวอย่างด้านบน และโค้ดจะแสดงค่ารหัสย่อ/สีในแอตทริบิวต์ value แทนที่จะเป็นข้อความที่มองเห็นได้

ตัวอย่างการรับค่าในสคริปต์ PHP

ในตัวอย่างนี้การรับค่าของตัวเลือกที่เลือกจากรายการแบบหล่นลง แบบฟอร์มจะถูกสร้างขึ้นโดยใช้แท็กในส่วนมาร์กอัป หลังจากเลือกสีจากรายการแบบเลื่อนลงแล้ว ให้คลิกที่ปุ่ม "ส่ง" ข้อมูลแบบฟอร์มจะถูกส่งไปยังไฟล์ PHP เดียวกัน หลังจากนั้นสีที่เลือกจะปรากฏขึ้น:


ดูการสาธิตและรหัสออนไลน์

วิธีการของแบบฟอร์มที่ใช้ในตัวอย่างคือ POST ดังนั้นคุณจึงสามารถรับค่าของแบบฟอร์มได้โดยใช้อาร์เรย์ PHP $_POST[“”] นี่คือโค้ดแบบฟอร์มที่ใช้ในตัวอย่าง:

เลือกสี: มารูน เขียว เหลือง น้ำเงิน แดง

และนี่คือวิธีการใช้สคริปต์ PHP เพื่อรับค่าตัวเลือกการเลือก HTML:

หากแบบฟอร์มระบุวิธีการ GET ให้ใช้อาร์เรย์ PHP $_GET[“”]

จัดแต่งทรงผมรายการแบบเลื่อนลงด้วย CSS

ตอนนี้เรามาดูวิธีจัดรูปแบบรายการแบบเลื่อนลงโดยใช้พลังของ CSS ในการสาธิตต่อไปนี้ ฉันใช้คุณสมบัติ CSS แบบง่าย ๆ และคุณสมบัติการไล่ระดับสี CSS3:


ดูการสาธิตและรหัสออนไลน์

เมื่อใช้ร่วมกับการไล่ระดับสีเชิงเส้น จะใช้คุณสมบัติ box-shadow ที่นี่ โค้ด CSS ที่สมบูรณ์มีลักษณะดังนี้:

Selcls ( padding: 3px; border: solid 1px #517B97; เค้าร่าง: 0; พื้นหลัง: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3) ถึง (#FFFFFF)); พื้นหลัง: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); : rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

มุมโค้งมนโดยใช้คุณสมบัติ border-radius

สำหรับตัวเลือกการเลือก HTML เราจะตั้งค่าคุณสมบัติ border-radius ของ CSS3 เพื่อให้มุมโค้งมน โทนสีก็เปลี่ยนไปเช่นกัน คุณสามารถทดลองกับเส้นขอบ ความกว้าง ระยะขอบ และคุณสมบัติอื่นๆ ได้ตามที่คุณต้องการ:


ดูการสาธิตและโค้ดออนไลน์โดยใช้แอตทริบิวต์และสไตล์ CSS หลายแบบ

หากต้องการอนุญาตให้ผู้ใช้เลือกหลายตัวเลือกจากรายการ คุณต้องใช้แอตทริบิวต์หลายรายการ ในตัวอย่างข้างต้น สามารถเลือกได้เพียงตัวเลือกเดียวเท่านั้น เมื่อใช้หลายรายการ คุณสามารถเลือกตัวเลือกได้หลายรายการโดยกดปุ่ม CTRL:


ดูการสาธิตและโค้ดออนไลน์ การใช้เฟรมเวิร์ก Bootstrap และปลั๊กอินเพื่อสร้างรายการแบบเลื่อนลงที่สวยงาม

หากคุณใช้เฟรมเวิร์ก Bootstrap คุณจะมีโอกาสใช้ปลั๊กอินเพื่อสร้างตัวเลือก HTML ที่ยอดเยี่ยม

วันนี้ผมอยากจะนำเสนอ “สูตร” เล็กๆ น้อยๆ สำหรับการสร้างรายการใน CSS ไม่มี JQuery ไม่มี CSS3 - แค่ CSS ข้ามเบราว์เซอร์เก่าที่ดี ตัวอย่างนี้ค่อนข้างง่าย สหายผู้มีประสบการณ์จึงอาจไม่สนใจ เราจะใช้รายการแบบเลื่อนลงพร้อมปุ่มโซเชียล


เอาล่ะอย่าคุยกันนาน เรามาเข้าเรื่องกันดีกว่า

HTML แบ่งปันโพสต์นี้
• เฟสบุ๊ค
• ทวิตเตอร์
• กูเกิลพลัส
• VKontakte
• อาร์เอสเอส

ฉันจงใจละเว้นประเด็นทั่วไป เช่น การรวมสไตล์ เพื่อไม่ให้โค้ดเติบโต ฉันจะให้ลิงก์ไปยังแหล่งที่มาที่ด้านล่างของหน้า - ทุกอย่างอยู่ที่นั่น
สิ่งที่เรามีใน HTML คือรายการปกติและส่วนหัวที่ผิดปกติ คุณลักษณะที่ไม่ธรรมดาของมันคือการสร้างไฮเปอร์ลิงก์ ซึ่งช่วยให้คุณสามารถติดตามเหตุการณ์ :hover ซึ่งก็คือการโฮเวอร์ รายการแบบเลื่อนลงจะทำงานเมื่อคุณวางเมาส์เหนือชื่อ

ซีเอสเอส

ขั้นแรก มาดูรูปแบบพื้นฐานของรายการแบบเลื่อนลง ฉันพยายามแสดงความคิดเห็นโค้ดทุกบรรทัดเพื่อให้ชัดเจนยิ่งขึ้น:

/*รีเซ็ตช่องว่างภายใน*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; Position:absolute; Margin:10px 0 0 25px ) /*รูปแบบบล็อกโฮเวอร์*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*หัวเรื่องในสถานะปกติ*/ .droplink h3 a( text-align:center ; ความกว้าง:100%; จอแสดงผล:บล็อก; การขยาย:12px 0px; น้ำหนัก:ตัวหนา; ตำแหน่ง:สัมบูรณ์ )

ไม่มีอะไรพิเศษที่นี่ เราได้ระบุขนาดและรูปแบบของบล็อก รูปแบบของส่วนหัว และสำหรับทั้งสององค์ประกอบ รูปแบบของพวกมันเมื่อวางเคอร์เซอร์ ไปต่อกันดีกว่า:

/*ซ่อนรายการโดยไม่ต้องโฮเวอร์*/ .droplink ul( list-style:none; display:none ) /*แสดงรายการเมื่อโฮเวอร์*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( จอแสดงผล:บล็อก)

โค้ดนี้น่าสนใจกว่าและแสดงให้เห็นว่ารายการแบบเลื่อนลงทำงานอย่างไรเมื่อวางเมาส์เหนือ ในสภาวะปกติมีค่าใช้จ่าย จอแสดงผล:ไม่มี,นั่นคือมันไม่แสดง เมื่อโฮเวอร์ เราจะแสดงเป็นบล็อก นั่นเป็นความลับทั้งหมด ตอนนี้เรามาตกแต่งองค์ประกอบรายการกันเล็กน้อยแล้วใส่ไอคอน:

/*รูปแบบรายการรายการ*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; การตกแต่งข้อความ:none; ขนาดตัวอักษร:12px ; พื้นหลังซ้ำ: ไม่ซ้ำ; ตำแหน่งพื้นหลัง: 10px 3px ) /*สไตล์องค์ประกอบโฮเวอร์*/ .droplink li a:hover( สีพื้นหลัง:#999 ) /*ไอคอน*/ .facebook a (รูปภาพพื้นหลัง) :url("icons/facebook.png")) .twitter a (พื้นหลังภาพ:url("icons/twitter.png")) .vk a (พื้นหลังภาพ:url("icons/vk.png")) .rss a (พื้นหลังภาพ:url("icons/rss.png")) .gplus a (พื้นหลังภาพ:url("icons/gplus.png"))

นั่นคือทั้งหมดจริงๆ รายการแบบเลื่อนลงพร้อมและดูดีทีเดียว คุณสามารถออกแบบองค์ประกอบต่างๆ ตามดุลยพินิจของคุณ เพิ่มมุมโค้งมน และรายละเอียดอื่นๆ

หากคุณต้องการให้รายการ "ซ้อนทับ" ข้อความด้านล่างเมื่อวางเมาส์เหนือ ให้มองไปด้านข้าง ดัชนี z.

หากมีบางอย่างไม่ชัดเจนหรือไม่ได้ผล ถามในความคิดเห็นหรือใช้ปุ่ม “ส่งข้อความ” ก็อยู่ที่นั่น ->

บ่อยครั้งที่ผู้เริ่มต้นต้องเผชิญกับปัญหาในการออกแบบรายการแบบเลื่อนลง เนื่องจากคุณไม่สามารถทำอะไรพิเศษกับการเลือกดั้งเดิมได้ จากนั้น jQuery ก็เข้ามาช่วยเหลือ และคุณสามารถทำอะไรได้เกือบทุกอย่าง

แต่จะเป็นอย่างไรถ้าฉันบอกคุณว่ามันเป็นไปได้ที่จะออกแบบรายการแบบเลื่อนลง HTML มาตรฐานโดยใช้ CSS ล้วนๆ ล่ะ

รายการแบบเลื่อนลงใน HTML

สีของพื้นหลังและข้อความสามารถเปลี่ยนแปลงได้ และทำได้ง่ายมาก

Sherlock Holmes The Great Gatsby V สำหรับ Vendetta หมาป่าแห่ง Wallstreet Quantum of Solace

เราได้เพิ่มคลาส 2 คลาสเพื่อสแปน คลาสหนึ่งคลาสหลักซึ่งจะมีสไตล์ "ดรอปดาวน์แบบกำหนดเอง" หลักทั้งหมด และคลาสที่สองขนาดใหญ่ซึ่งจะกำหนดขนาดของรายการดรอปดาวน์ เราสามารถจัดเตรียมล่วงหน้าได้ 3 ขนาด ใหญ่ กลาง เล็ก และกำหนดขนาดตัวอักษรตามสไตล์ และอย่ากังวลกับอนาคต คุณสามารถข้ามขั้นตอนนี้ได้ ทุกอย่างขึ้นอยู่กับการออกแบบของคุณบนเว็บไซต์

เนื้อความ ( พื้นหลัง: #2a2a2b; สี: #fff; text-align: center; ตระกูลแบบอักษร: Arial, Helvetica; ) .big ( ขนาดแบบอักษร: 1.2em; ) /* ดรอปดาวน์แบบกำหนดเอง */ .custom-dropdown ( ตำแหน่ง : สัมพันธ์; display: inline-block; ขนาด: ช่องว่างภายใน: .5em; border: 0; border-radius: 0.01px; ; /* ซ่อนลูกศรเริ่มต้นใน chrome OSX */ ) .custom-dropdown::before, .custom-dropdown::after (เนื้อหา: "" ; ตำแหน่ง: สัมบูรณ์; เหตุการณ์ตัวชี้: ไม่มี; ) .custom-dropdown:: after ( /* ลูกศรแบบเลื่อนลงแบบกำหนดเอง */ เนื้อหา: "\25BC"; ความสูง: 1em; ขนาดตัวอักษร: .625em; line-height: 1 ; ขวา: 1.2em; ด้านบน: 50%; ระยะขอบบน: -.5em ; ) .custom-dropdown::before ( /* ปกลูกศรแบบเลื่อนลงที่กำหนดเอง */ ความกว้าง: 2em; ขวา: 0; ด้านบน: 0; ด้านล่าง: 0; รัศมีเส้นขอบ: 0 3px 3px 0; ) .custom-dropdown select ( color: rgba(0,0,0,.3); ) .custom-dropdown select::after ( color: rgba(0,0,0,.1); ) .custom-dropdown::before ( สีพื้นหลัง: rgba(0,0,0,.15); ) .custom-dropdown::after ( สี: rgba(0,0,0,.4); )

หากคุณไม่ต้องการรบกวนและศึกษาสไตล์ เพียงเพิ่มมันลงในไซต์ของคุณและเปลี่ยนสีให้เข้ากับดีไซน์ของไซต์ของคุณ จากนั้นคุณเพียงแค่ต้องเปลี่ยนสีพื้นหลังและค่าสีในรูปแบบ ".custom-dropdown select"