Menu Navigasi Vertikal Melayang Dengan Icon
Menu Navigasi Vertikal Melayang Dengan Icon. Ada berbagai variasi yang dapat kita buat dari widget menu navigasi ini. Dengan kreasi dan pemahaman tentang CSS yang lebih, kita dapat menciptakan keunikan yang membuat blog kita menjadi lebih beda dari yang lain. Tentunya anda harus membaca pengertian dan tutorial CSS terlebih dahulu supaya anda bisa memiliki bayangan seperti apa CSS itu.
Yang kali ini Jona Rendra share merupakan hasil sedikit modifikasi dari menu yang saya temukan dari web web CSS. Dari kelihatannya, menu yang satu ini bernuansa merah hitam. Supaya blog kita menjadi sedikit terisi, maka saya buat navigasi ini melayang atau fixed. Bagi yang sudah bersiap siap ingin memasangnya di blog, simak tutorial dibawah ini.
2. Copy CSS berikut ini dan paste di atas kode
3. Selanjutnya, letakkan kode berikut dibawah kode
5. Anda sudah berhasil memasang menu navigasi vertikal dengan icon. Saatnya kita sesuaikan widget ini terhadap blog.
Jika ingin mengubah warna latar dari
Rangkaian HTML menu navigasi juga perlu anda kustomisasikan. Dengan mengganti
Apabila anda sudah menggunakan Font Awesome, Cari kode dari icon yang ingin anda pakai di page berikut Daftar Icon Font Awesome.
Perlu diingat, bahwa menu ini bukan dropdown atau tidak memiliki submenu. Sebab, bisa dikatakan ini masih versi 1 nya. Jadi, nanti kalau ada kesempatan, saya akan update yang sudah mempunyai submenu.
Akhirnya selesai keseluruhan artikel dari Jona Rendra tentang menu navigasi ini. Apabila ada pertanyaan seputar pemasangan Menu Navigasi Vertikal Melayang Dengan Icon, silahkan kirim lewat formulir komentar dibawah.
Menu Navigasi Vertikal Melayang Dengan Icon
A. Tutorial
1. Login ke blogger, pilih blog dan masuk ke Edit HTML Template2. Copy CSS berikut ini dan paste di atas kode
]]></b:skin>
atau </style>
#sidebar-kiri {
position:fixed;
background:#222;
width:200px;
height:100%;
z-index:9999;
}
.vertikal-nav {
width:200px;
margin:0;
padding:0;
float:left;
font-family:Segoe UI,Arial;
position:relative;
list-style:none;
z-index:9999;
}
.vertikal-nav li {
display:block;
width:100%;
padding:0;
float:left;
font-size:14px;
position:relative;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.vertikal-nav li a {
width:100%;
display:block;
padding:15px 20px 15px 19px;
color:#888;
text-decoration:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
.vertikal-nav ul,
.vertikal-nav ul li ul {
list-style:none;
margin:0;
padding:0;
display:none;
position:absolute;
z-index:999;
width:100%;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.vertikal-nav ul {
top:0;
left:100%;
}
.vertikal-nav ul li ul {
top:1px;
}
.vertical-nav ul li {
clear:both;
width:100%;
}
.vertikal-nav ul li a {
padding:15px 20px;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
}
.vertikal-nav li i {
line-height:24px !important;
margin:-15px 14px 0 -19px;
font-size:25px;
float:left;
padding-right:10px;
padding:16px 15px 12px 15px;
width:28px;
text-align:center;
-o-transition:background .3s ease-in-out;
-webkit-transition:background .3s ease-in-out;
-moz-transition:background .3s ease-in-out;
transition:background .3s ease-in-out;
}
.vertikal-nav.dark,
.vertikal-nav.dark ul,
.vertikal-nav.dark ul li ul {
background:#222 !important;
}
.red li i:hover {
background:#e74c3c;
color:#fff;
}
.red li a:hover {
color:#e74c3c;
}
3. Selanjutnya, letakkan kode berikut dibawah kode
<body>
<div id='sidebar-kiri'>
<ul class='vertikal-nav dark red'>
<li><a href='/' target='_blank'><i class='icon-home'></i>Beranda</a></li>
<li><a href='/p/daftar-isi.html' target='_blank'><i class='icon-book'></i>Daftar isi</a></li>
<li><a href='/p/kontak.html' target='_blank'><i class='icon-phone-sign'></i>Kontak</a></li>
<li><a href='/p/tentang-saya.html' target='_blank'><i class='icon-user'></i>Tentang saya</a></li>
</ul>
</div>
4. Setelah itu, ikon atau thumbnail dari menu bisa anda buat dari gambar. Tetapi, ada yang lebih mudah dari pada membuat gambar sendiri. Yaitu dengan menggunakan font awesome. Font Awesome ini adalah karakter yang penampilannya sudah dirancang sebagai icon atau lambang dari aturan tertentu. Seperti logo dan simbol simbol yang lain. Saya sudah punya CSS dari font awesome ini.
<link href='https://sites.google.com/site/blogjona/files/jonarendra-font-awesome.min.css' rel='stylesheet'/>
HTML diatas letakkan di bawah kode <head>
5. Anda sudah berhasil memasang menu navigasi vertikal dengan icon. Saatnya kita sesuaikan widget ini terhadap blog.
B. Kustomisasi
Pada CSS, kita perlu membuat menu navigasi ini berada di dalam suatu elemen. Disini,#sidebar-kiri
yang memiliki peran. Buat elemen ini memiliki posisi melayang / fixed supaya terus menempel dihalaman blog. Apabila tidak, menu navigasi akan tergulung jika halaman blog di scroll.Jika ingin mengubah warna latar dari
#sidebar-kiri
, anda juga harus mengubah background .vertikal-nav .dark
supaya memiliki warna yang menyatu.Rangkaian HTML menu navigasi juga perlu anda kustomisasikan. Dengan mengganti
- URL yang dituju
<a href='URL'
- Ikon / logo menu
<i class='NAMA ICON'>
- Nama link
Apabila anda sudah menggunakan Font Awesome, Cari kode dari icon yang ingin anda pakai di page berikut Daftar Icon Font Awesome.
Perlu diingat, bahwa menu ini bukan dropdown atau tidak memiliki submenu. Sebab, bisa dikatakan ini masih versi 1 nya. Jadi, nanti kalau ada kesempatan, saya akan update yang sudah mempunyai submenu.
Akhirnya selesai keseluruhan artikel dari Jona Rendra tentang menu navigasi ini. Apabila ada pertanyaan seputar pemasangan Menu Navigasi Vertikal Melayang Dengan Icon, silahkan kirim lewat formulir komentar dibawah.
Kalau dipasang keren dan menarik juga ini mas kodenya bisa simpan untuk dipraktekkan diblog baru.
ReplyDeletehasilnya keren pak.. tolong dibuatin menu yang dibawahnya judul blog terus kalau discroll ke bawah bisa fixed keatas gimana ya ?
ReplyDeletekayaknya itu namanya sticky menu. kapan kapan saya posting deh
DeleteMakasih banyak ya mas .. ini sangat membantu sekali :)
ReplyDeleteiya sama sama
Deletemantap bro artikelnya, thanks ya
ReplyDeletewah mksh ya mas tipsnya..
ReplyDeletewah keren juga mas menu navigasi nya kalau dibuat vertikal getu. Bisa dicoba nich :)
ReplyDeletesip, silahkan dicoba
Deletebener kata mbak ririn, menu navigasinya kerennnn
DeleteLiat demonya, hasilnya keren banget ternyata *_*
ReplyDeletekeren bang.. hasilny..langsung praktek :)
ReplyDeletekeren kang, tapi lagi males otak atik html nih :D
ReplyDeletekayak punya agan itu ya.. Lain kali aja dah. Sukses slalu aja.
ReplyDeleteiya betul, sukses juga sama blognya ya..
Deletekaga berhasil bang. Sudah saya ikuti sampe abis dan tetep gabisa. Jadi bingung neh
ReplyDeletememang sulit kalau mau buat menu navigasi sendiri
Deleteperlu teliti dengan CSS dan HTML nya
yang saya share diatas adalah kode yang 100% saya pakai pada blog ini tanpa saya edit
Bro, udah berhasil nih. Cuma susah aja karena teksnya gabisa disorot. Tolong dibenerin dulu sob biar pengunjung nyaman.
ReplyDeletekalo mau nambahin menu sama icon nya gimana itu ya ?
ReplyDeletemin kalo menu navigasi samping kiri blog, kayak punyanya kang ismet gimana ya min :D
ReplyDeletecara buat menunya turun sedikit yang di ubah apanya???
ReplyDelete