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.
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.