มูลนิธิแถบนำทางด้านบน
แถบนำทางด้านบนบนหัวของหน้า:
ตัวอย่าง
<ระดับ Ul = "ชื่อพื้นที่ ">
<ระดับ Li = "ชื่อ">
<! - ถ้าคุณไม่จำเป็นต้องมีชื่อหรือไอคอนที่จะลบมัน ->
<h1> <a href = "#"> WebSiteName </ a> </ h1>
</ li>
<- ปุ่มพับบนหน้าจอขนาดเล็ก :! Remove ประเภท .menu ไอคอนคุณสามารถลบไอคอน
หากคุณต้องการให้แสดงเฉพาะภาพคุณสามารถลบ "เมนู" ข้อความ ->
<li class = "สลับ topbar เมนูไอคอน"> <a href = "#"> <span> เมนู </ span> </ A> </ li>
</ ul>
<ระดับมาตรา = "บนแถบ -section">
<ระดับ Ul = "ซ้าย">
<li class = "ใช้งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<li> <a href = "#"> หน้า 1 </ a> </ li>
<li> <a href = "#"> หน้า 2 </ a> </ li>
<li> <a href = "#"> หน้า 3 </ a> </ li>
</ ul>
</ มาตรา>
</ Nav>
<! - เริ่มต้นมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
ตัวอย่างของการวิเคราะห์
ใช้ <nav class="top-bar" data-topbar> " data-topbar> สร้างแถบเครื่องมือมาตรฐาน .title-area ระดับกำหนดพื้นที่โลโก้เว็บไซต์ (ต้องมีการป้องกัน li.name ภายใน) หลังจากที่หน้าจอขนาดเล็กที่คุณสามารถเห็นปุ่ม "เมนู" มูลนิธิของเมนูตามขนาดหน้าจอขยายเครื่องดื่มพับอัตโนมัติ:
บนหน้าจอขนาดเล็กเพราะขนาดของหลายตัวเลือกจะถูกซ่อนไว้ li.toggle-topbar menu.icon ชั้นสร้างปุ่มเมนูให้คลิกเพื่อแสดงตัวเลือกที่ซ่อนอยู่
เคล็ดลับ: การตั้งค่าหน้าต่างเบราว์เซอร์เพื่อดูผล
.top-bar-section กำหนดทิศทางการเชื่อมโยงส่วน .left ชั้นระบุการเชื่อมโยงจัดชิดซ้าย .active ชั้นถูกนำมาใช้เพื่อแสดงรายการที่เลือกพื้นหลังสีฟ้า
เคล็ดลับ: หากคุณต้องการขวาสอดคล้องเชื่อมโยงการนำสามารถ .left แก้ไข .right :
นอกจากนี้คุณยังสามารถตั้งค่าการจัดตำแหน่งซ้ายสอดคล้องกับขวา:
ตัวอย่าง
<ระดับ Ul = "ซ้าย">
<li class = "ใช้งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<li> <a href = "#"> หน้า 1 </ a> </ li>
<li> <a href = "#"> หน้า 2 </ a> </ li>
</ ul>
<ระดับ Ul = "สิทธิ">
<li> <a href = "#"> Sign Up </ a> </ li>
<li> <a href = "#"> เข้าสู่ระบบ </ a> </ li>
</ ul>
</ มาตรา>
ลอง»
แถบนำทางโดย .divider เพื่อเพิ่มเส้นแบ่งชั้น (เส้นแนวตั้งบนหน้าจอขนาดใหญ่หน้าจอขนาดเล็กเป็นเส้นแนวนอน):
ตัวอย่าง
<li class = "ใช้งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#"> หน้า 1 </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#"> หน้า 2 </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#"> หน้า 3 </ a> </ li>
<li class = "แบ่ง"> </ li>
</ ul>
ลอง»
เลื่อนลงของแถบเมนู
คุณสามารถตั้งค่าแถบนำทางที่ด้านบนของเมนูแบบเลื่อนลง
โดย <li> องค์ประกอบจะมีการเพิ่ม .has-dropdown ชั้นการตั้งค่าเมนูแบบเลื่อนลงไปนี้:
ตัวอย่าง
<ระดับ Ul = "ซ้าย">
<li class = "ใช้งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<ระดับ Li = "มี-แบบเลื่อนลง ">
<A href = "#"> เลื่อนลง </ a>
<ระดับ Ul = "เลื่อนลง">
<li> <a href = "#"> ลิงค์ครั้งแรกในแบบเลื่อนลง </ a> </ li>
<li> <a href = "#"> การเชื่อมโยงที่สองในแบบเลื่อนลง </ a> </ li>
<li class = "ใช้งาน"> <a href = "#"> ลิงค์ที่ใช้งานในแบบเลื่อนลง </ a> </ li>
</ ul>
</ li>
</ ul>
</ มาตรา>
ลอง»
เส้นแบ่ง
ใช้ .divider ชั้นเรียนเพื่อกำหนดเส้นแบ่งเมนูแบบเลื่อนลงไปนี้:
ตัวอย่าง
<li> <a href = "#"> แอปเปิ้ล </ a> </ li>
<li> <a href = "#"> กล้วย </ a> </ li>
<li> <a href = "#"> ส้ม </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a href = "#"> คะน้า </ a> </ li>
<li> <a href = "#"> ผักโขม </ a> </ li>
</ ul>
เลื่อนลงป้ายเมนู
ใน <li> ภายในเพิ่ม <label> เมนูแบบเลื่อนลงองค์ประกอบในการตั้งป้าย (ชื่อเรื่อง):
ตัวอย่าง
<li> <label> ผลไม้ < / label> </ li>
<li> <a href = "#"> แอปเปิ้ล </ a> </ li>
<li> <a href = "#"> กล้วย </ a> </ li>
<li> <a href = "#"> ส้ม </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <label> ผัก < / label> </ li>
<li> <a href = "#"> คะน้า </ a> </ li>
<li> <a href = "#"> ผักโขม </ a> </ li>
</ ul>
เมนูแบบเลื่อนลงสมองกลฝังตัว
เมนูแบบเลื่อนลงสามารถฝังตัวอยู่ในเมนูแบบเลื่อนลง:
ตัวอย่าง
<ระดับ Ul = "ซ้าย">
<ระดับ Li = "มี-แบบเลื่อนลง ">
<A href = "#"> เลื่อนลง </ a>
<ระดับ Ul = "เลื่อนลง">
<li> <label> ระดับ 1 </ label> </ li>
<li> <a href = "#"> ลิงค์ </ a> </ li>
<li> <a href = "#"> ลิงค์ </ a> </ li>
<ระดับ Li = "มี-แบบเลื่อนลง ">
<A href = "#"> แบบเลื่อนลงใหม่ </ a>
<ระดับ Ul = "เลื่อนลง">
<li> <label> ระดับ 2 </ label> </ li>
<li> <a href = "#"> ระดับเลื่อนลง 2 </ a> </ li>
<li> <a href = "#"> ระดับเลื่อนลง 2 </ a> </ li>
<ระดับ Li = "มี-แบบเลื่อนลง ">
<A href = "#"> แบบเลื่อนลงใหม่ </ a>
<ระดับ Ul = "เลื่อนลง">
<li> <label> Level 3 </ label> </ li>
<li> <a href = "#"> แบบเลื่อนลง 3 ระดับ </ a> </ li>
<li> <a href = "#"> แบบเลื่อนลง 3 ระดับ </ a> </ li>
</ ul>
</ li>
</ ul>
</ li>
</ ul>
</ li>
</ ul>
</ มาตรา>
ลอง»
คลิกได้
โดยค่าเริ่มต้นเมนูแบบเลื่อนลงในแถบนำทางเพื่อเลื่อนเมาส์ไปที่การแสดงผลให้เราสามารถใช้ data-options="is_hover: false" " แอตทริบิวต์การตั้งค่าแถบนำทางจะปรากฏที่คลิกเมาส์ไปนี้:
ปุ่มและไอคอนบนแถบนำทาง
คุณสามารถวางไอคอนบนแถบนำทางและปุ่ม:
คุณสามารถใส่ไอคอนในแถบนำทางคุณสามารถดูภาพเพิ่มเติมสไตล์ มูลนิธิไอคอนกวดวิชา :
ตัวอย่าง
<! - มูลนิธิสไตล์ไอคอน ->
<link rel = "สไตล์ชีต" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ head>
<ระดับ Ul = "ซ้าย">
<li class = "ใช้งาน"> <a href = "#"> <i class = "FI-บ้าน"> </ i> หน้าแรก </ a> </ li>
<li> <a href = "#"> <i class =" FI-ลำตัว "> </ i> Sign Up </ a> </ li>
<li> <a href = "#"> <i class =" FI-แว่นขยายแก้ว "> </ i> ค้นหา </ A> </ li>
</ ul>
ลอง»
นำทางคงที่
แถบนำทางสามารถแก้ไขที่ด้านบนของหน้า
เลื่อนแถบนำทางหน้าที่ด้านบนจะไม่ย้าย
ในการแก้ไขปัญหาแถบนำทางเพียงเพื่อแถบนำทางบน <div class="fixed"> ภายในเพื่อ:
แถบนำทางตำแหน่งแน่นอน
เราสามารถใส่แถบนำทาง <div class="sticky"> ในแถบนำทางในการตั้งตำแหน่งแน่นอนเมื่อแถบเลื่อนที่จะแผ่ไปยังภูมิภาคแถบนำทางเป็นคงที่แถบนำทางที่ด้านบนไม่ย้าย:
เมื่อคุณใช้ .sticky ชั้นแถบนำทางด้านบนคงที่และจะอยู่ในทุกขนาดหน้าจอ หากคุณจำเป็นต้องระบุการตั้งค่าบนหน้าจอเฉพาะใน <nav> ก่อนหน้า data-options="sticky_on: small|medium|large" | กลาง | ใหญ่" ทรัพย์สิน:
ตัวอย่าง
<! - เฉพาะบนหน้าจอใหญ่ ->
<Nav class = "บนแถบ " data-topbar ข้อมูลตัวเลือก = "sticky_on: ขนาดใหญ่">
..
</ Nav>
</ div>
หรือโดยการอาร์เรย์ของส่วนใหญ่ของขนาดหน้าจอที่ใช้งาน:
ตัวอย่าง
<! - หน้าจอขนาดเล็กและขนาดหน้าจอขนาดใหญ่ (กลางของหน้าจอไม่ได้) ->
<Nav class = "บนแถบ " data-topbar ข้อมูลตัวเลือก = "sticky_on: [ขนาดเล็กขนาดใหญ่]">
..
</ Nav>
</ div>