Cara Termudah Membuat Dan Mendesain Menu Navigasi Blog.
4 Model Desain Menu Navigasi Blogger - Banyak variasi model-model desain tampilan menu navigasi blogger yang dapat kita gunakan sebagai pelengkap rangkuman artikel-artikel blog dalam menu navigasi. Dan beberapa model menu berikut sudah saya desain dengan tampilan yang berbeda-beda dengan 4 model pilihan:

1. Reflowing Folder Image Rollover Nav
2. Navigasi Hover Light
3. Horizontal Uberlist Menus
4. 3D Menu Navigasi



Untuk mendesain/mengubah tampilan menu navigasi pada blog, hal yang terpenting adalah diagaram menu tersebut akan kita ubah bentuknya menjadi seperti apa dan bagaimana.?
umumnya bentuk diagram menu navigasi seperti ini:


<ul>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
   <li><a href="#">Menu 4</a></li>
   <li><a href="#">Menu 5</a></li>
</ul>

Dengan sub-menu

<ul>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
         <ul class="sub-menu">
           <li><a href="#">Menu 3.1</a></li>
           <li><a href="#">Menu 3.2</a></li>
           <li><a href="#">Menu 3.3</a></li>
         </ul>
   <li><a href="#">Menu 4</a></li>
   <li><a href="#">Menu 5</a></li>
</ul>


Dengan memahami bentuk diagram menu tersebut, maka dengan mudah kita mendesain tampilan menunya akan terlihat seperti apa. Cukup menambahkan pengaturan CSS untuk membuat bentuk menu Anda seperti apa, seperti tutorial kali ini, SAHABAT BLOGGER 77 akan membagikan 4 Model Desain Menu Navigasi Blogger yang dapat Anda pilih.



1. Reflowing Folder Image Rollover Nav
Tampilan menu ini saya mengambil tema dari bentuk folder file, seperti yang sering terlihat pada penyimpanan file di ms.Word, ms.Exel dengan CSS seperti ini:


#navcontainer {margin: 0px;padding: 0px;}
#navcontainer ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: left;}

#navcontainer ul li {float: left;}
#navcontainer ul li a {background:
url(http://butterlabel.com/transfer/butterlist/images/folderOFF.png) no-repeat top left;
  text-decoration: none;
  font-size: 10px/12px;
  float: left;
  margin: 0px -12px 0 0;
  height: 67px;
  width: 105px;
  padding:13px 0 0 10px;}

#navcontainer li a:hover {background: url(http://butterlabel.com/transfer/butterlist/images/folderON.png) no-repeat left top;
color: #000000;}


<div id="navcontainer">
   <ul id="navlist">
<li id="active"><a href="/" id="current">Beranda</a></li>
<li><a href="/">Daftar Isi</a></li>
<li><a href="/">Go Backlink</a></li>
<li><a href="/">About Profile</a></li>
<li><a href="/">Contact</a></li>
   </ul>
</div>


DEMO SHOW



2. Navigasi Hover Light
Hover light (perubahan warna background saat pointer berada ditasnya), namun tampilannya sedikit saya ubah dengan menggunakan 2 warna background yang berubah saat hover seperti ini:


#navlist {
  padding: 0 5px 5px;
  margin-left: 0;
  font: bold 14px Verdana, sans-serif;}

#navlist li {
  list-style: none;
  margin: 0;
  border-top: 1px solid gray;
  display: inline;}

#navlist li a {
  padding: 10px;
  border-left: 1em solid #AAB;
  background: #CCD;
  text-decoration: none;}

#navlist li a:link {color: #448;}
#navlist li a:visited {color: #667;}
#navlist li a:hover {border-color: red;color: #FFF;background: #39f;}


<div id="navcontainer">
   <ul id="navlist">
<li id="active"><a href="/" id="current">Beranda</a></li>
<li><a href="/">Daftar Isi</a></li>
<li><a href="/">Go Backlink</a></li>
<li><a href="/">About Profile</a></li>
<li><a href="/">Contact</a></li>
   </ul>
</div>


DEMO SHOW


3. Horizontal Uberlist Menus
Tampilan menu yang minimalis dengan mengaktifkan warna background pada link-activ beranda.


#navlist ul {margin: 0;white-space: nowrap;padding: 0;}
#navlist li {display: inline;list-style-type: none;}
#navlist a {
  padding: 6px 8px 6px 24px;
  border: 1px solid #333;
  background-color: #999;
  font: bold 14px Verdana, sans-serif;
  background-image: url(images/l1_down.gif);}

#navlist a:link, #navlist a:visited{color: #EEE;}
#navlist a:hover {
  border: 1px solid #333;
  background-color: #FF6600;
  color: #333;}

#active a:link, #active a:visited, #active a:hover{
  border: 1px solid #333;
  background-color: #FF6600;
  color: #333;}


<div id="navcontainer">
   <ul id="navlist">
<li id="active"><a href="/" id="current">Beranda</a></li>
<li><a href="/">Daftar Isi</a></li>
<li><a href="/">Go Backlink</a></li>
<li><a href="/">About Profile</a></li>
<li><a href="/">Contact</a></li>
   </ul>
</div>


DEMO SHOW



4. 3D Menu Navigasi
Posisi menu yang dibalut dengan border-timbul, dan akan terlihat menekan saat pointer mouse Anda berada diatasnya, sehingga menu ini saya beri nama "3D Menu Navigasi".


#navlist {
  color: white;
  background: #17a;
  border-bottom: 0.2em solid #17a;
  border-right: 0.2em solid #17a;
  padding: 0 1px;
  margin-left: 0;
  width: 12em;
  font: normal 0.8em Verdana, sans-serif;}

#navlist li {
  list-style: none;
  margin: 0;
  font-size: 1em;}

#navlist a {
  display: block;
  text-decoration: none;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  color: white;
  background: #39c;
  border-width: 1px;
  border-style: solid;
  border-color: #5bd #035 #068 #6cf;
  border-left: 1em solid #fc0;
  padding: 0.25em 0.5em 0.4em 0.75em;}

#navlist a#current {border-color: #5bd #035 #068 #f30;}
#navlist a {width: 99%;}
#navlist a {
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 9.6em;}

#navcontainer>#navlist a {width: auto;}
#navlist a:hover, #navlist a#current:hover {
  background: #28b;
  border-color: #069 #6cf #5bd #fc0;
  padding: 0.4em 0.35em 0.25em 0.9em;}

#navlist a:active, #navlist a#current:active {
  background: #17a;
  border-color: #069 #6cf #5bd white;
  padding: 0.4em 0.35em 0.25em 0.9em;}


<div id="navcontainer">
   <ul id="navlist">
<li id="active"><a href="/" id="current">Beranda</a></li>
<li><a href="/">Daftar Isi</a></li>
<li><a href="/">Go Backlink</a></li>
<li><a href="/">About Profile</a></li>
<li><a href="/">Contact</a></li>
   </ul>
</div>


DEMO SHOW




Bagaimana.? sudah menemukan pilihan yang sesuai untuk ke 4 Model Desain Menu Navigasi Blogger seperti diatas.! atau ingin tampilan menu navigasi FIXED, pilihannya ada disini:

4 Model Menu Navigasi Fixed (Melayang)
Membuat Menu Wrapper Melayang Di Atas Blog
Membuat Menu Navigasi Fixed Fly Out Dengan CSS3
Membuat Navigasi Menu Fixed Full RotateX
Mengubah Breadcrumb Menjadi Menu Navigasi

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 4 Model Desain Menu Navigasi Blogger
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

17 komentar

  1. wah mantap, lain waktu saya akan coba

    BalasHapus
  2. ini mah materi tugas kuliah aku, lain kali kalau ada tugas tentang CSS, mampir kesini dah.

    BalasHapus
  3. keren keren semua ya menu navigasi nya. Kalau saya sih lebih suka yang menu drop down karena bisa buat nyimpen menu yang lebih banyak, apalagi jumlah kategori blog yang lumayan banyak. Tapi saya suka yang biasa aja sih :) soalnya kalau banyak efek nya malah nanti takut nya bikin berat loading blog ;)

    BalasHapus
    Balasan
    1. selagi hal itu tidak menyangkut dengan penggunaan script, kecepatan loading bisa kita atur atau sesuaikan mbak, seperti kita sebariskan kode CSS-nya saat peletakan, sehingga tidak ada lekukan dalam kode,

      berbeda dengan script yang tidak bisa kita sebariskan, karena akan memiliki fungsi yang berbeda jika kita satukan.

      Hapus
  4. ini yang saya suka dari mbak devy, blognya rapih. Dibaca juga nyaman.. :)

    BalasHapus
  5. pertama kalii main-main kesini :D

    BalasHapus
  6. Ikut belajar lagi di Sahabat Blogger 77. Cantik-cantik desain menu navigasinya, sista...
    Terutama yang "3D Menu Navigasi", cocok dengan seleraku.
    Terima kasih sudah berbagi, "4 Model Desain Menu Navigasi Blogger", dengan cara baru berbagi online.

    BalasHapus
  7. Keren Mba desain menu navigasinya,

    Salam

    BalasHapus
  8. Mantap Mbak banyak pilihannya :)

    BalasHapus
  9. kalau saya lebih suka yang sederhana saja mbak, seperti uberlist itu :)

    BalasHapus
    Balasan
    1. semuanya tergantung selera mbak,banyak mereka yang suka dengan tampilan yang berbeda tetapi malah takut akan speed load,, sebenarnya semuanya bagaimana cara kita menempatkan kode tersebut agar tidak mempengaruhi loading, seperti sebariskan kode misalnya, sehingga ruang kode tidak ada celah.

      Hapus
  10. Navigasi dalam menu ini bisa berganda ya mbak dibuat, artinya apa tidak bentrok jika dipadukan bersama-sama

    BalasHapus
    Balasan
    1. jika menggabungkan 2 atribut dalam 1 wilayah HTML menu, maka tampilan menu akan berantakan, kita bebas membuat menu lebih dari 1 bahkan 10 menu sekaligus, asalkan penggunaan atribut menu jangan digabung (disatukan) dalam wilayah yang sama

      artinya, boleh menempatkan beberapa menu dalam satu wilayah, namun pisahkan setiap atribut menu tersebut, sebagai contoh, menu diatas header dan menu dibawah header, sama-sama menu navigasi, namun fungsinya dapat bekerja (tidak bentrok bukan.!)

      Hapus
  11. wihh keren2 menu navagasinya mbak.. :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK