Yayasan geser navigasi (Off-Canvas)
navigasi sidebar
Off-Canvas navigasi geser sekarang secara bertahap menjadi lebih dan lebih populer (klik pada tombol menu pada menu slide keluar dari kiri) dalam halaman mobile:
Untuk membuat navigasi geser
Untuk membuat navigasi geser contoh adalah sebagai berikut:
contoh
<- Div Terluar :! Page Layout ->
<Class Div = "off-kanvas -wrap" Data-offcanvas>
<- Elemen internal :! "Toolbars" konten (ikon, link, deskripsi, dll) ->
<Class Div = "inner-wrap ">
<Class Nav = "tab-bar ">
<Class Bagian = "kiri-kecil ">
class <A = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Bagian>
<Class Bagian = "Tab- tengah bar-bagian">
<Class H1 = "title"> Off-kanvas Contoh </ h1>
</ Bagian>
</ Nav>
<! - Sliding Menu ->
<Selain class = "kiri-off -canvas-menu">
<! - Tambahkan link atau hal-hal lain di sini ->
<Ul class = "off-kanvas tes -list">
<Li> <label> Pos < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Selain>
<! - Konten Main ->
<Class Bagian = "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Bagian>
<! - Tutup menu ->
class <A = "exit-off -canvas"> </ a>
</ Div> <! - End konten internal ->
</ Div> <! - Menu geser End ->
<! - Inisialisasi Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
<Class Div = "off-kanvas -wrap" Data-offcanvas>
<- Elemen internal :! "Toolbars" konten (ikon, link, deskripsi, dll) ->
<Class Div = "inner-wrap ">
<Class Nav = "tab-bar ">
<Class Bagian = "kiri-kecil ">
class <A = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Bagian>
<Class Bagian = "Tab- tengah bar-bagian">
<Class H1 = "title"> Off-kanvas Contoh </ h1>
</ Bagian>
</ Nav>
<! - Sliding Menu ->
<Selain class = "kiri-off -canvas-menu">
<! - Tambahkan link atau hal-hal lain di sini ->
<Ul class = "off-kanvas tes -list">
<Li> <label> Pos < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Selain>
<! - Konten Main ->
<Class Bagian = "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Bagian>
<! - Tutup menu ->
class <A = "exit-off -canvas"> </ a>
</ Div> <! - End konten internal ->
</ Div> <! - Menu geser End ->
<! - Inisialisasi Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »