แถบด้านข้างมูลนิธิ
นำทางแถบด้านข้าง
ใช้มูลนิธิ <ul class="side-nav"> "> เพื่อสร้างแถบด้านข้าง:
ตัวอย่าง
<ระดับ Ul = "ด้าน nav ">
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
<li> <a href = "#"> เชื่อมโยง 3 </ a> </ li>
<li> <a href = "#"> 4 Link </ a> </ li>
</ ul>
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
<li> <a href = "#"> เชื่อมโยง 3 </ a> </ li>
<li> <a href = "#"> 4 Link </ a> </ li>
</ ul>
ลอง»
การเปิดใช้งานการเชื่อมโยงกับเส้นแบ่ง
ผมคลิกที่ลิงก์ใน <li> ใช้ .active ชั้นระบุการใช้ .divider ชั้นเรียนเพื่อเพิ่มเส้นแนวนอน:
ตัวอย่าง
<ระดับ Ul = "ด้าน nav ">
<li class = "ใช้งาน"> <a class = "a" href = "#"> 1 Link </ a> </ li>
<li> <a class = "a" href = "#"> 2 Link </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a class = "a" href = "#"> เชื่อมโยง 3 </ a> </ li>
<li> <a class = "a" href = "#"> 4 Link </ a> </ li>
</ ul>
<li class = "ใช้งาน"> <a class = "a" href = "#"> 1 Link </ a> </ li>
<li> <a class = "a" href = "#"> 2 Link </ a> </ li>
<li class = "แบ่ง"> </ li>
<li> <a class = "a" href = "#"> เชื่อมโยง 3 </ a> </ li>
<li> <a class = "a" href = "#"> 4 Link </ a> </ li>
</ ul>
ลอง»
แถบด้านข้างกริด
เราสามารถใช้โหมดการออกแบบตารางการตั้งค่าแถบนำทางด้านข้างตัวอย่างดังต่อไปนี้:
ตัวอย่าง
<ระดับ Div = "แถว">
<div class = "ขนาด 4 คอลัมน์" style = "สีพื้นหลัง: # f1f1f1;">
<ระดับ Ul = "ด้าน nav ">
<li class = "ใช้งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<li> <a href = "#"> เรียนรู้ HTML </ a> </ li>
...
</ ul>
</ div>
<ระดับ Div = "ขนาด 8 คอลัมน์">
<h1> Side Nav </ h1 >
<p> ข้อความบาง .. </ p>
...
</ div>
</ div>
<div class = "ขนาด 4 คอลัมน์" style = "สีพื้นหลัง: # f1f1f1;">
<ระดับ Ul = "ด้าน nav ">
<li class = "ใช้งาน"> <a href = "#"> หน้าแรก </ a> </ li>
<li> <a href = "#"> เรียนรู้ HTML </ a> </ li>
...
</ ul>
</ div>
<ระดับ Div = "ขนาด 8 คอลัมน์">
<h1> Side Nav </ h1 >
<p> ข้อความบาง .. </ p>
...
</ div>
</ div>
ลอง»