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

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.
Xem thử

DEMO

Làm thế nào để cài đặt menu này cho blogger
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(http://1.bp.blogspot.com/-g0PsFMpPb7A/UbNY74ZIjvI/AAAAAAAAbRU/USkZfpEur6A/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!
Nhận xét

Không có nhận xét nào :