Yayasan sidebar
navigasi sidebar
Yayasan penggunaan <ul class="side-nav"> "> untuk membuat sidebar:
contoh
<Class Ul = "side-nav ">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Link 4 </ a> </ li>
</ Ul>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
<Li> <a href = "#"> Link 4 </ a> </ li>
</ Ul>
Coba »
Link aktivasi dengan garis pemisah
Saya mengklik pada link di <li> Gunakan .active kelas diidentifikasi menggunakan .divider kelas untuk menambahkan garis horizontal:
contoh
<Class Ul = "side-nav ">
<Li class = "aktif"> <a class = "a" href = "#"> Link 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 4 </ a> </ li>
</ Ul>
<Li class = "aktif"> <a class = "a" href = "#"> Link 1 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 2 </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a class = "a" href = "#"> Link 3 </ a> </ li>
<Li> <a class = "a" href = "#"> Link 4 </ a> </ li>
</ Ul>
Coba »
Grid sidebar
Kita dapat menggunakan modus desain grid untuk mengatur sisi navigasi, contoh adalah sebagai berikut:
contoh
<Class Div = "row">
<Class Div = "menengah-4 kolom" style = "background-color: # f1f1f1;">
<Class Ul = "side-nav ">
<Li class = "aktif"> <a href = "#"> Depan </ a> </ li>
<Li> <a href = "#"> Pelajari HTML </ a> </ li>
...
</ Ul>
</ Div>
<Class Div = "menengah-8 kolom">
<H1> Side Nav </ h1 >
<P> Beberapa teks .. </ p>
...
</ Div>
</ Div>
<Class Div = "menengah-4 kolom" style = "background-color: # f1f1f1;">
<Class Ul = "side-nav ">
<Li class = "aktif"> <a href = "#"> Depan </ a> </ li>
<Li> <a href = "#"> Pelajari HTML </ a> </ li>
...
</ Ul>
</ Div>
<Class Div = "menengah-8 kolom">
<H1> Side Nav </ h1 >
<P> Beberapa teks .. </ p>
...
</ Div>
</ Div>
Coba »