Menu đa cấp với hiệu ứng phiên bản Scriptiny

Lợi thế của phiên bản này là tập tin javascript rất nhẹ nhàng,thậm chí bạn không cần jquery hỗ trợ hiệu ứng của các trình đơn phụ.Về màu sắc của hiệu ứng tôi nghĩ bạn không cần chỉnh sửa gì vì thấy khá đẹp mắt.

Cài đặt menu này chỉ qua 2 bước
Đầu tiên vào thiết kế chọn chỉnh sửa HTML tìm tới thẻ </head> sao chép đoạn mã dưới đây và dán vào trước nó rồi lưu mẫu<style type='text/css'>
/*
Tema: LEGO
*/
ul.menu {list-style:none;margin:10px 0;padding:0;height:33px;background-color:#A10000;font:11px Verdana,Arial;}
ul.menu * {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;border:0;width:150px;margin:0;}
ul.menu ul li a {display:block;padding:7px 15px 7px;background-color:#084a9b;color:#7eb7fb;}
ul.menu ul li a:hover {background-color:#ffe30a;color:#fff;}
ul.menu ul ul {left:150px;top:-1px;}
ul.menu .menulink {padding:10px 15px 10px;font-weight:bold;text-transform:uppercase;background:#A10000;color:#fb9d9d;}
ul.menu .menulink:hover,
ul.menu .menuhover {background:#449400;color:#caecac;}
ul.menu .sub {background:#084a9b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLaFFKRNs-loP9CKA66Fzc2j4DJHNJh-IloVM8PCS0WjzWiU9UVXKfOdLKlWskhpZaGG60dmw3ejZ86PN2XuIfbtSIx3RYkagJThfBi_2Bzq0c0Q5V5_T31o9DyCJz5cP12-jg8iL9S39P/s1600/arrowgambreng.gif) 138px 10px no-repeat;color:#7eb7fb;}
ul.menu .sub:hover {color:#fff;}
</style>
<script type='text/javascript'>
//<![CDATA[
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}}();
//]]>
</script>
Bước tiếp theo là tiến hành thêm một tiện ích và dán đoạn mã dưới đây vào là xong<ul class='menu' id='menugambreng'>
<li><a href='#' class='menulink'>HOME</a></li>

<li><a href='#' class='menulink'>PROFIL</a>
<ul>
<li><a href='#'>Item Navigasi 1</a></li>
<li><a href='#' class='sub'>Item Navigasi 2</a>
<ul>
<li><a href='#'>Item Navigasi 2 1</a></li>
<li><a href='#'>Item Navigasi 2 2</a></li>
<li><a href='#'>Item Navigasi 2 3</a></li>
<li><a href='#'>Item Navigasi 2 4</a></li>
<li><a href='#'>Item Navigasi 2 5</a></li>
</ul>
</li>
<li><a href='#' class='sub'>Item Navigasi 3</a>
<ul>
<li><a href='#'>Item Navigasi 3 1</a></li>
<li><a href='#'>Item Navigasi 3 2</a></li>
<li><a href='#' class='sub'>Item Navigasi 3 3</a>
<ul>
<li><a href='#'>Item Navigasi 3 3 1</a></li>
<li><a href='#'>Item Navigasi 3 3 2</a></li>
<li><a href='#'>Item Navigasi 3 3 3</a></li>
<li><a href='#'>Item Navigasi 3 3 4</a></li>
<li><a href='#'>Item Navigasi 3 3 5</a></li>
<li><a href='#'>Item Navigasi 3 3 6</a></li>
</ul>
</li>
<li><a href='#'>Item Navigasi 3 4</a></li>
</ul>
</li>
<li><a href='#'>Item Navigasi 4</a></li>
<li><a href='#'>Item Navigasi 5</a></li>
</ul>
</li>

<li><a href='#' class='menulink'>SUNTING</a></li>

<li><a href='#' class='menulink'>PENJAHAT</a>
<ul>
<li><a href='#'>Item Navigasi 1</a></li>
<li><a href='#' class='sub'>Item Navigasi 2</a>
<ul>
<li><a href='#'>Item Navigasi 2 1</a></li>
<li><a href='#'>Item Navigasi 2 2</a></li>
<li><a href='#'>Item Navigasi 2 3</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='#' class='menulink'>TAI KUCING</a>
<ul>
<li><a href='#'>Item Navigasi 1</a></li>
<li><a href='#'>Item Navigasi 2</a></li>
<li><a href='#'>Item Navigasi 3</a></li>
<li><a href='#'>Item Navigasi 4</a></li>
<li><a href='#'>Item Navigasi 5</a></li>
<li><a href='#' class='sub'>Item Navigasi 6</a>
<ul>
<li><a href='#'>Item Navigasi 6 1</a></li>
<li><a href='#'>Item Navigasi 6 2</a></li>
</ul>
</li>
<li><a href='#'>Item Navigasi 7</a></li>
<li><a href='#'>Item Navigasi 8</a></li>
<li><a href='#'>Item Navigasi 9</a></li>
<li><a href='#'>Item Navigasi 10</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
var menu=new menu.dd('menu');
menu.init('menugambreng','menuhover');
</script>
Chúc thành công!