Yayasan Magellan (Magellan) navigasi
Cara membuat navigasi Magellan
Magellan Navigasi adalah indeks navigasi dibuat sebagai berikut:
contoh
<Dl class = "sub-nav ">
<Dd data Magellan-tiba = "page1"> <a href = "# page1"> Halaman 1 </ a> </ dd>
<Dd data Magellan-tiba = "page2"> <a href = "# page2"> Halaman 2 </ a> </ dd>
</ Dl>
</ Div>
<H3 data Magellan-tujuan = "page1"> Page1 </ h3>
Nama <A = "page1"> </ a>
...
<H3 data Magellan-tujuan = "page2"> Page2 </ h3>
Nama <A = "page2"> </ a>
...
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
Contoh analisis
Pada <div> elemen untuk menambahkan data-magellan-expedition="fixed" " properti untuk membuat Magellan Navigasi.
Kemudian <dd> atau <li> Tambahkan data-magellan-arrival=" value " " atribut, dan menambahkan link kembali sebagai nilai atribut (page1).
Menggunakan data-magellan-destination="value" " atribut untuk mengontrol Magellan sasaran navigasi, diikuti oleh <a> elemen menambahkan name=" value " atribut. Dua nilai properti harus data-magellan-arrival nilai yang konsisten (page1).
Akhirnya, inisialisasi Yayasan JS, navigasi pengguna sementara bergulir halaman tersebut akan secara otomatis beralih berdasarkan konten yang sedang ditampilkan.
Kepala Magellan Navigation Toolbar
Kepala Magellan Navigasi Toolbar menggunakan contoh:
contoh
<Nav class = "top-bar " Data-topbar>
...
<Bagian class = "top-bar -bagian">
<Class Ul = "left">
<Li data Magellan-tiba = "page1"> <a href = "# page1"> Halaman 1 </ a> </ li>
<Li data Magellan-tiba = "page2"> <a href = "# page2"> Halaman 2 </ a> </ li>
</ Ul>
</ Bagian>
</ Nav>
</ Div>
<H3 data Magellan-tujuan = "page1"> Page1 </ h3>
Nama <A = "page1"> </ a>
...
<H3 data Magellan-tujuan = "page2"> Page2 </ h3>
Nama <A = "page2"> </ a>
...
Coba »
Magellan Navigasi Padding
Secara default, navigasi Magellan <div> elemen memiliki padding 10px. CSS dapat digunakan untuk menghapusnya:
Magellan pilihan navigasi
Menggunakan data-opsi mengubah atribut pengaturan navigasi Magellan, seperti <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| nama | jenis | kegagalan | deskripsi | contoh |
|---|---|---|---|---|
| active_class | tali | aktif | Kelas menentukan link aktivasi | mencoba |
| ambang | jumlah | 0 | Tentukan jam berapa navigasi membutuhkan posisi tetap. Akan dihitung sesuai dengan scroll bar, default adalah 0 (auto). | mencoba |
| destination_threshold | jumlah | 20 | Nilai yang ditetapkan diatur untuk menampilkan nilai dari link navigasi untuk menavigasi dari atas daftar aktif (latar belakang biru) saat. | mencoba |
| fixed_top | jumlah | 0 | Menentukan nilai pixel dari bar navigasi kepala | mencoba |