4 Model Desain Menu Navigasi Blogger

Info informasi 4 Model Desain Menu Navigasi Blogger atau artikel tentang 4 Model Desain Menu Navigasi Blogger ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain. 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

Demikian artikel tentang 4 Model Desain Menu Navigasi Blogger ini dapat kami sampaikan, semoga artikel atau info tentang 4 Model Desain Menu Navigasi Blogger ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik