มูลนิธินำทางเลื่อน (Off-ผ้าใบ)

นำทางแถบด้านข้าง

ปิดผ้าใบนำทางสไลด์ค่อยๆกลายเป็นที่นิยมมากขึ้น (คลิกที่ปุ่มเมนูบนเมนูสไลด์ออกจากซ้าย) ในหน้ามือถือ:


เพื่อสร้างลูกศรเลื่อน

เพื่อสร้างลูกศรเลื่อนตัวอย่างดังต่อไปนี้:

ตัวอย่าง

<- div นอกสุด :! เค้าโครงหน้า ->
<ระดับ Div = "ปิดผ้าใบ -wrap" data-offcanvas>
<- องค์ประกอบภายใน :! "แถบ" เนื้อหา (ไอคอน, การเชื่อมโยง, คำอธิบาย, ฯลฯ ) ->
<ระดับ Div = "ภายในห่อ ">
<ระดับ Nav = "แท็บบาร์ ">
<ระดับมาตรา = "ซ้ายขนาดเล็ก ">
ระดับ <A = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ A>
</ มาตรา>

<ระดับมาตรา = "แท็บกลาง บาร์ส่วน">
<ระดับ H1 = "ชื่อ"> ปิดผ้าใบตัวอย่าง </ h1>
</ มาตรา>
</ Nav>

<! - เลื่อนเมนู ->
<นอกเหนือ class = "ซ้ายปิด -canvas เมนู">
<! - เพิ่มการเชื่อมโยงหรือสิ่งอื่น ๆ ที่นี่ ->
<ul class = "ปิดผ้าใบ ทดสอบรายชื่อ">
<li> <label> เดินทาง < / label> </ li>
<li> <a href = "#"> 1 Link </ a> </ li>
<li> <a href = "#"> 2 Link </ a> </ li>
th.
</ ul>
</ นอกเหนือ>

<! - เนื้อหาหลัก ->
<ระดับมาตรา = "หลักส่วน ">
<h3> Lorem Ipsum </ h3 >
<p> thth </ p>
</ มาตรา>

<! - ปิดเมนู ->
ระดับ <A = "exit-off -canvas"> </ a>

</ div> <! - End เนื้อหาภายใน ->
</ div> <! - เมนูเลื่อน End ->

<! - เริ่มต้นมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>

ลอง»