Cara Membuat Diagram Menu Navigasi Bertingkat

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.

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/AVvXsEikAUpYR4lBFI-Hrk2jO4_8Pa7b1aHd_M7Ms0jeuKe8QWTXXYUHmRGUyKnzfVxP7nJn8zjD3ddaH_gAfk9_Gy5xUqyp4aNeIjRrc4CXIGsL_RdqgELxMl2KO07FBnhZI04bOter77Akio4/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