23.5.14
13
Cara Membuat Diagram Menu Navigasi Bertingkat - Menu navigasi merupakan atribut pelengkap pada blog, namun dengan adanya menu tersebut dapat membuat tampilan blog lebih menawan, sehingga dapat memanjakan pengunjung dengan item-item artikel yang termuat dalam agenda menu tersebut. Tutorial kali ini SAHABAT BLOGGER 77 akan memberikan trik sederhana tentang Cara Membuat Diagram Menu Navigasi Bertingkat dengan mudah.

Diagram Menu Navigasi Image



Baca juga cara - Membuat Navigasi Menu Fixed Full RotateX

Seperti halnya tampilan menu pada blog Anda, pada menu navigasi kali ini sedikit saya ubah tampilannya dengan menggunakan javaScript variable efek toggle, sehingga saat link pada menu di hover, pergeseran tampilan pada sub menu menjadi lembut. Dan untuk menjaga warna background tetap aktif saat di posisi sub menu, saya menggunakan perintah javaScript tagName (a), agar lebih jelasnya berikut susunan javaScript untuk membuat diagram menu navigasi bertingkat efek toggle


var menu=function(){var t=15,z=500,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');}}
dd.prototype.st=function(x,f){var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}}
function sl(c,f){var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'}
return{dd:dd}}();


Rangkaian javascript untuk membuat diagram bertingkat pada menu navigasi Anda sudah selesai, perhatikan pada kode yang saya beri warna orange , silahkan Anda sesuaikan nilai elemen pada angka variable (t),(z) dan (s) jika ingin mengubah kecepatan pada sub menu. Tahap berikutnya pembentukan diagram menu dengan kode elemen CSS berikut

ul.menu {
   list-style:none;
   margin:10px 0;
   padding:0;
   height:33px;
   background-color:#333;
   font:11px Verdana,Arial;}

ul.menu dinamic {margin:0;padding:0;}
ul.menu a {
   display:block;
   text-decoration:none;
   color:#7eb7fb;}

ul.menu li {position:relative;float:left;}
ul.menu ul {
   position:absolute;
   z-index:100;
   top:32px;
   left:0;
   background-color:#7eb7fb;
   display:none;
   opacity:0;
   list-style:none;
   -webkit-box-shadow:0 3px 5px #aaa;
   -moz-box-shadow:0 3px 5px #aaa;
   box-shadow:0 3px 5px #aaa;}

ul.menu ul li {position:relative;width:150px}
ul.menu ul li a {
   display:block;
   padding:7px 15px 7px;
   background-color:#084a9b;
   color:#7eb7fb;}

ul.menu ul li a:hover {background-color:orange;color:#660000;}
ul.menu ul ul {left:150px;top:-1px;}
ul.menu .menulink {
   padding:10px 15px 10px;
   font-weight:bold;
   text-transform:uppercase;
   background:#080;
   color:#fff;}

ul.menu .menulink:hover,
ul.menu .menuhover {background:red;color:#fff;}
ul.menu .sub {background:#084a9b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmPz0ADuYWMPvVJFOG66rFYCBgcsXT3ASjwseJcCZ2L7PEFZIW3IzXo-yLGhjLEMizVSEHW-b1bejZlykcxYXiXDBbiGaChbm7IIV0mM7dKOpu4ke8M9cqPvbJ0GFVQWxR3kZEFvlAblQ/s1600/arrow-sahabatblogger77.png) 138px 10px no-repeat;color:#7eb7fb;}
ul.menu .sub:hover {color:#fff;}




DEMO SHOW



Tahap akhir penggunaan HTML.
Sedikit informasi buat sahabat semua, bahwa peletakan javaScript tidak harus selalu pada elemen tag </body> atau </head>, jika perintah javascript tersebut berhubungan dengan HTML, maka kodenya bisa Anda letakkan dalam satu wilayah HTML, seperti perintah javascript berikut yang saya letakkan dalam satu wilayah HTML seperti ini

<ul class='menu' id='dinamicmenu'>
<li><a href='#' class='menulink'>BERANDA</a></li>
<li><a href='#' class='menulink'>NAVIGASI 1</a>
<ul>
<li><a href='#'>Navigasi Menu 1</a></li>
<li><a href='#' class='sub'>Navigasi Menu 2</a>
<ul>
<li><a href='#'>Navigasi Menu 2 1</a></li>
<li><a href='#'>Navigasi Menu 2 2</a></li>
<li><a href='#'>Navigasi Menu 2 3</a></li>
<li><a href='#'>Navigasi Menu 2 4</a></li>
<li><a href='#'>Navigasi Menu 2 5</a></li>
</ul>
</li>
<li><a href='#' class='sub'>Navigasi Menu 3</a>
<ul>
<li><a href='#'>Navigasi Menu 3 1</a></li>
<li><a href='#'>Navigasi Menu 3 2</a></li>
<li><a href='#' class='sub'>Navigasi Menu 3 3</a>
<ul>
<li><a href='#'>Navigasi Menu 3 3 1</a></li>
<li><a href='#'>Navigasi Menu 3 3 2</a></li>
</ul>
</li>
<li><a href='#'>Navigasi Menu 3 4</a></li>
</ul>
</li>
<li><a href='#'>Navigasi Menu 4</a></li>
<li><a href='#'>Navigasi Menu 5</a></li>
</ul>
</li>
<li><...!!...></li>
//dan seterusnya...//
</ul>
<script type='text/javascript'>
var menu=new menu.dd('menu','sahabatblogger77');
menu.init('dinamicmenu','menuhover');
</script>


Bagaimana.? mudah dan keren bukan tampilan menunya, hehe..!! Semoga tutorial tentang menu navigasi kali dapat bermanfaat buat Anda, jika Anda mengalami kesulitan tentang peletakan serta penggunaan kode-kode diatas, silahkan Anda telusuri artikel saya sebelumnya tentang Peletakan Serta Cara Mendesain Menu Navigasi Blog

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Diagram Menu Navigasi Bertingkat
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 >>
= TERIMA KASIH =

13 komentar

  1. wah... menarik juga yia navigas bertingkat, sayang menu blog saya sdikit skali, hehehe...

    BalasHapus
    Balasan
    1. ditunggu bos menu banyak dahulu,hehe

      Hapus
  2. belum cukup untuk nampung menu mbak.
    masih sedikit menunya.

    BalasHapus
  3. wahh, keren mbak menu navigasi bertingkatnya, ijin coba akh :D

    BalasHapus
  4. keren mbak... tapi lumayan banyak ya skripnya, bisa dicoba nih bikin diagram menu seperti itu :) makasih sharingnya.

    BalasHapus
  5. Menu seperti ini cocok buat yang punya banyak label jadinya praktis yah hehehe

    BalasHapus
  6. asli keren..!! keren banget..! tutorial navigasinya
    salut but mba devi yang jago coding blog.

    BalasHapus
  7. saya mesti banyak belajar dari mba devi

    BalasHapus
    Balasan
    1. jangan berlebihan begitu mas,saya juga masih harus banyak belajar kok,hehe

      Hapus
  8. Cakep banget diagram menu navigainya, sepertinya bisa di coba nih. Belajar pelan-[ean ah... :D

    Salam

    BalasHapus
  9. ini dia yang saya cari-cari, akhirnya ketemu juga. terima kasih tipsnya ya 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