เมนูแบบเลื่อนลงมูลนิธิ
เมนูแบบเลื่อนลงมูลนิธิช่วยให้ผู้ใช้สามารถเลือกค่าจากรายการแบบหล่นลงของที่กำหนดไว้ล่วงหน้าของ:
ตัวอย่าง
<A href = "#" ข้อมูล -dropdown = "id01" class = "button dropdown"> เลื่อนลงปุ่ม </ a>
<! - เนื้อหาแบบเลื่อนลง ->
<ul id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลง">
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
<li> <a href = "#"> เชื่อมโยง 3 </ a> </ li>
</ ul>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
ตัวอย่างของการวิเคราะห์
.dropdown ระดับเป็นปุ่มลูกศรลงเพื่อเพิ่มสัญลักษณ์ "ไอคอน
ใช้ปุ่มหรือการเชื่อมโยง data-dropdown=" id " แอตทริบิวต์เพื่อเปิดเมนูแบบเลื่อนลง
ค่า ID ต้องตรงกับเนื้อหาเมนูแบบเลื่อนลง (id01)
ใน <The div> <NAV> <ul> เพิ่ม .f-dropdown ชั้นเรียนและ data-dropdown-content เมนูแบบเลื่อนลงแอตทริบิวต์การสร้างเนื้อหา
เริ่มต้นล่าสุดมูลนิธิ JS
หมายเหตุ: บนหน้าจอขนาดเล็กทั้งหมดของความกว้างของเมนูแบบเลื่อนลงเป็น 100%
ขนาดเมนูแบบเลื่อนลง
ใช้ .tiny , .small , .medium , .large หรือ .mega การปรับเปลี่ยนความกว้างของเมนูแบบเลื่อนลง
หมายเหตุ: บนหน้าจอขนาดเล็กทั้งหมดของความกว้างของเมนูแบบเลื่อนลงเป็น 100%
ตัวอย่าง
<ul id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลงเล็ก ๆ "> ..
<! - เลื่อนลงขนาดเล็ก: max- ความกว้าง 300px ->
<ul id = "id02" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนขนาดเล็ก"> ..
<! - เลื่อนลงกลาง: max- ความกว้าง 500px ->
<ul id = "id03" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลงกลาง">
<! - เลื่อนลงขนาดใหญ่: max- ความกว้าง 800px ->
<ul id = "id04" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนขนาดใหญ่"> ..
<- เมกะเลื่อนลง :! 100% ความกว้าง ->
<ul id = "id04" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลงล้าน"> ..
ลอง»
เมนูแบบเลื่อนลงอัตรากำไรขั้นต้น
คุณสามารถใช้ .content ชั้นเรียนเพื่อเพิ่มช่องว่างภายในที่เมนูแบบเลื่อนลง:
ตัวอย่าง
<ul id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลง"> ..
<! - เลื่อนลงกับ padding ->
<ul id = "id02" ข้อมูล -dropdown เนื้อหา class = "เนื้อหา F-แบบเลื่อนลง"> ..
ลอง»
ตัวอย่างอื่น ๆ
<div> เมนูแบบเลื่อนลงเพื่อเพิ่มองค์ประกอบมัลติมีเดีย:
ตัวอย่าง
<div id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลงเนื้อหากลาง">
<H4> ปารีสชื่อ </ h4 >
<p> ข้อความบางข้อความบางส่วน .. .. </ p>
<img src = "paris.jpg" alt = "ปารีส" width = "400" height = "300">
<p> ปารีส, je t'aime. </ p>
</ div>
ลอง»
ทิศทางของเมนูแบบเลื่อนลง
โดยค่าเริ่มต้นเมนูแบบเลื่อนลงที่ด้านล่างคุณสามารถเพิ่ม data-options="align:left|right|top" | ขวา | Top" เพื่อเปลี่ยนทิศทางของ:
ตัวอย่าง
<A href = "#" ข้อมูล -dropdown = "id02" data-options = "align: ระดับ top" = "button dropdown"> สูงสุด </ a>
<A href = "#" ข้อมูล -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> ล่าง </ a>
<A href = "#" ข้อมูล -dropdown = "id04" data-options = "align: ระดับ left" = "button dropdown"> ซ้าย </ a>
ลอง»
เมนูแบบเลื่อนลงเรียกเงื่อนไข
โดยค่าเริ่มต้นเมนูแบบเลื่อนลงจะปรากฏบนมีการคลิกปุ่ม หากคุณต้องการที่จะย้ายจอแสดงผลเมาส์ขึ้นคุณสามารถใช้ปุ่ม data-options="is_hover:true" " แอตทริบิวต์:
ตัวอย่าง
<ul id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลง">
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
<li> <a href = "#"> เชื่อมโยง 3 </ a> </ li>
</ ul>
ลอง»
ปุ่มสปลิต
เราสามารถเพิ่มปุ่ม .split ระดับการตั้งค่าปุ่มผลแยกจะสร้างปุ่มไอคอนทิศทางที่ลดลงใน <span> องค์ประกอบของการแบ่งส่วน:
ตัวอย่าง
<span ข้อมูลแบบเลื่อนลง = "id01 "> </ span>
</ ปุ่ม>
<ul id = "id01" ข้อมูล -dropdown เนื้อหา class = "F-แบบเลื่อนลง">
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
<li> <a href = "#"> เชื่อมโยง 3 </ a> </ li>
</ ul>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»