Sunday, 15 December 2013

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.

Vertical Nav Dark Red Thumbnail jonarendra

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.

Menu Navigasi Vertikal Melayang Dengan Icon

A. Tutorial

1. Login ke blogger, pilih blog dan masuk ke Edit HTML Template
2. 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.

KATEGORI:
arrow_back
arrow_forward

21 komentar

Kalau dipasang keren dan menarik juga ini mas kodenya bisa simpan untuk dipraktekkan diblog baru.

hasilnya keren pak.. tolong dibuatin menu yang dibawahnya judul blog terus kalau discroll ke bawah bisa fixed keatas gimana ya ?

kayaknya itu namanya sticky menu. kapan kapan saya posting deh

Makasih banyak ya mas .. ini sangat membantu sekali :)

wah keren juga mas menu navigasi nya kalau dibuat vertikal getu. Bisa dicoba nich :)

bener kata mbak ririn, menu navigasinya kerennnn

Liat demonya, hasilnya keren banget ternyata *_*

keren bang.. hasilny..langsung praktek :)

keren kang, tapi lagi males otak atik html nih :D

kayak punya agan itu ya.. Lain kali aja dah. Sukses slalu aja.

iya betul, sukses juga sama blognya ya..

kaga berhasil bang. Sudah saya ikuti sampe abis dan tetep gabisa. Jadi bingung neh

Bro, udah berhasil nih. Cuma susah aja karena teksnya gabisa disorot. Tolong dibenerin dulu sob biar pengunjung nyaman.

memang sulit kalau mau buat menu navigasi sendiri
perlu teliti dengan CSS dan HTML nya
yang saya share diatas adalah kode yang 100% saya pakai pada blog ini tanpa saya edit

kalo mau nambahin menu sama icon nya gimana itu ya ?

min kalo menu navigasi samping kiri blog, kayak punyanya kang ismet gimana ya min :D

cara buat menunya turun sedikit yang di ubah apanya???

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon