4 Model Desain Menu Navigasi Blogger

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
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 >>

http://sahabatblogger77.blogspot.com/2014/09/4-model-desain-menu-navigasi-blogger.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77