Latest web development tutorials
×

Foundation หลักสูตร

Foundation หลักสูตร Foundation เริ่มต้น Foundation ข้อความ Foundation ตาราง Foundation ปุ่มกด Foundation กลุ่มปุ่ม Foundation ไอคอน Foundation ฉลาก Foundation กล่องแจ้งเตือน Foundation แถบความคืบหน้า Foundation แผงหน้าปัด Foundation ภาพ Foundation เมนูแบบเลื่อนลง Foundation รายการพับ Foundation รายการ Foundation แถบ Foundation เพจจิ้ง Foundation ดัชนีราคาสินค้า Foundation แถบนำทางด้านบน Foundation แถบด้านข้าง Foundation นำทางสไลด์(Off-Canvas) Foundation Magellan Foundation ฟอร์ม Foundation ขนาดของกรอบการป้อนข้อมูล Foundation สวิตซ์ Foundation Slider Foundation ลูกโป่ง Foundation กล่อง Modal Foundation Joyride Foundation ควอไลเซอร์

Foundation กินกัน

Foundation ระบบกริด Foundation กินกัน - ซ้อนกันในแนวนอน Foundation กินกัน - อุปกรณ์ขนาดเล็ก Foundation กินกัน - อุปกรณ์ขนาดกลาง Foundation กินกัน - อุปกรณ์ขนาดใหญ่ Foundation บล็อกตาราง Foundation ตัวอย่างตาราง

Foundation คู่มืออ้างอิง

Foundation คู่มืออ้างอิงไอคอน Foundation CSS คู่มืออ้างอิง Foundation CSS ความชัดเจน

มูลนิธินำทางเลื่อน (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>
...
</ ul>
</ นอกเหนือ>

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

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

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

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

ลอง»