How To Use Vertical TinyDropdown 2
In my opinion, it looks fast, smooth and clean.
The hover animation is really nice. I love it.

But there’s a problem. The script provided by Scriptiny is for horizontal dropdown menu only (as you can see in the picture above). But I needed it to be a vertical dropdown menu like some people were asking about. I’m gonna show you the example code I tweaked to make this a vertical dropdown menu.
Our index.html code looks like the following.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” /> <title>TinyDropdown 2 Vertical Version</title> <link rel=“stylesheet” href=“tinydropdown.css” type=“text/css” /> <script type=“text/javascript” src=“tinydropdown.js”></script> </head> <body> <div class=“nav”> <ul id=“menu” class=“menu”> <li> <span>One</span> <ul style=‘top: 0; margin-left: 170px;’> <li><a href=“#”>One</a></li> <li><a href=“#”>Two</a></li> <li><a href=“#”>Three</a></li> <li><a href=“#”>Four</a></li> </ul> </li> <li> <span>Two</span> <ul style=‘top: 0; margin-left: 170px;’> <li> <a href=“#”>One</a> <ul> <li><a href=“#”>One</a></li> <li><a href=“#”>Two</a> <ul> <li><a href=“#”>One</a></li> </ul> </li> </ul> </li> <li><a href=“#”>Two</a></li> </ul> </li> <li> <span>Three</span> <ul style=‘top: 0; margin-left: 170px;’> <li><a href=“#”>One</a></li> <li><a href=“#”>Two</a></li> </ul> </li> <li> <span>Four</span> <ul style=‘top: 0; margin-left: 170px;’> <li><a href=“#”>One</a></li> <li><a href=“#”>Two</a></li> </ul> </li> <li> <span><a href=‘#’>Five</a></span> </li> </ul> </div> <script type=“text/javascript”> var dropdown=new TINY.dropdown.init(“dropdown”, {id:’menu’, active:’menuhover’}); </script> </body> </html>
Our tinydropdown.css code:
*{ margin:0; padding:0; outline:0; } .nav { height:auto; width: 170px; float:left; background:#aaa; color:#fff; /*text-shadow:1px 1px #888; */ z-index:1000; } .menu a { color:#fff; text-decoration:none; width:170px; height:auto; display:block; } .menu span { color:#fff; text-decoration:none; width:170px; height:auto; font-weight:bold; display:block; } .menu a:hover { color:#fff; height:auto; background:#999; display:block; height:auto; width:170px; } .menu { list-style:none; font:16px Arial,Verdana; text-align:center; width:600px; margin:0 auto; } .menu li { position:relative; width:170px; z-index:1000; height:auto; line-height:30px; background:#AAAAAA; /*line-height:28px; this is responsible for line height*/ border-bottom:thin solid #fff; } .menu ul { display:none; position:absolute; font:normal 16px Arial,Verdana; top:36px; left:0; background:#aaa; display:none; list-style:none; } .menu ul li { float:none; width:170px; display:block; } .menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a { float:none; display:block; background:none; height:auto; width:170px; display:block; } .menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover { background:#999; color:#fff; height:auto; width:170px; display:block; } .menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span { float:none; display:block; background:none; height:auto; width:170px; } .menu ul ul { left:170px; top:0; } .menu li.submenu { } .menu li.noborder { border-top:none; } li.menuhover a, li.menuhover li.menuhover a { color:#fff; background:#999; height:auto; width:170px; display:block; } li.menuhover span, li.menuhover li.menuhover span { color:#fff; background:#999; height:auto; width:170px; display:block; } #info { width:180px; background:#eee; } #info li { width:160px; border-top:none; padding:8px 10px; color:#666; /*text-shadow:1px 1px #fff; */ text-align:left; }
Our tinydropdown.js code:
var TINY={}; function T$(i){return document.getElementById(i)} function T$$(e,p){return p.getElementsByTagName(e)} TINY.dropdown=function(){ var p={fade:1,slide:1,active:0,timeout:200}, init=function(n,o){ for(s in o){p[s]=o[s]} p.n=n; this.build() }; init.prototype.build=function(){ this.h=[]; this.c=[]; this.z=1000; var s=T$$(‘ul’,T$(p.id)), l=s.length, i=0; p.speed=p.speed?p.speed*.1:.5; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(p.n+‘.show(‘+i+‘,1)’); h.onmouseout=new Function(p.n+‘.show(‘+i+‘)’) } }; init.prototype.show=function(x,d){ var c=this.c[x], h=this.h[x]; clearInterval(c.t); clearInterval(c.i); c.style.overflow=‘hidden’; if(d){ if(p.active&&h.className.indexOf(p.active)==-1){h.className+=‘ ‘+p.active} if(p.fade||p.slide){ c.style.display=‘block’; if(!c.m){ if(p.slide){ c.style.visibility=‘hidden’; c.m=c.offsetHeight; c.style.height=‘0’; c.style.visibility=” }else{ c.m=100; c.style.opacity=0; c.style.filter=‘alpha(opacity=0)’ } c.v=0 } if(p.slide){ if(c.m==c.v){ c.style.overflow=‘visible’ }else{ c.style.zIndex=this.z; this.z++; c.i=setInterval(function(){slide(c,c.m,1)},20) } }else{ c.style.zIndex=this.z; this.z++; c.i=setInterval(function(){slide(c,c.m,1)},20) } }else{ c.style.zIndex=this.z; c.style.display=‘block’ } }else{ c.t=setTimeout(function(){hide(c,p.fade||p.slide?1:0,h,p.active)},p.timeout) } }; function hide(c,t,h,s){ if(s){h.className=h.className.replace(s,”)} if(t){c.i=setInterval(function(){slide(c,0,-1)},20)}else{c.style.display=‘none’} } function slide(c,t,d){ if(c.v==t){ clearInterval(c.i); c.i=0; if(d==1){ if(p.fade){c.style.filter=”; c.style.opacity=1} c.style.overflow=‘visible’ } }else{ c.v=(t–Math.floor(Math.abs(t–c.v)*p.speed)*d); if(p.slide){c.style.height=c.v+‘px’} if(p.fade){var o=c.v/c.m; c.style.opacity=o; c.style.filter=‘alpha(opacity=’+(o*100)+‘)’} } } return{init:init} }();
The output of the codes above will look like this:

Also, if you want my version of its horizontal dropdown menu, output looks like this:

Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!
[purchase_link id="12435" text="Download Now" style="button" color="green"]
Thank you for learning from our post about: How To Use Vertical TinyDropdown 2.