Cukup dua langkah perombakan saja yang kau perlukan untuk menuntaskan proyek ini:
Pertama-tama, masuklah ke tab Rancangan lalu pilih Edit HTML.
Salin baris CSS dan script ini, lalu letakkan sempurna di atas isyarat
</head>:<style type='text/css'> /* Tema: LEGO Oleh: http://hompimpaalaihumgambreng.blogspot.com */ 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://2.bp.blogspot.com/-x-_lO7zXjg4/Tk453ebAeHI/AAAAAAAAAvE/XXjrwOz0MbM/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> Terakhir tinggal meletakkan kerangka objeknya saja. Salin isyarat di bawah ini, lalu letakkan di kawasan dimana kau menginginkan sajian navigasi ini ditampilkan:
<ul class='menu' id='menugambreng'> <li><a href='#' class='menulink'>BERANDA</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>Pelajari beberapa alternatif peletakan sajian navigasi di sini »
Klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.
Catatan Tambahan:
- Setiap sajian utama (warna merah) setidaknya harus mempunyai atribut
class='menulink'pada masing-masing elemen<a>utama. - Untuk memunculkan simbol panah berwarna hitam yang mengakibatkan indikator keberadaan sub-sub sajian cukup dengan menambahkan atribut
class='sub'pada tiap-tiap elemen<a>yang diinginkan. - Mengubah kecepatan animasi juga sanggup dilakukan dengan mengutak-atik angka-angka yang terdapat pada variabel
var t=15,z=500,s=6
Sumber: hatetepe://wewewe.scriptiny.com
Sumber https://www.dte.web.id/