How To Use Vertical TinyDropdown 2

Hi guys, today I wanna share to you the code I tweaked with this amazing multi-level JavaScript Dropdown Menu by Scriptiny.

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!

Thank you for learning from our post about: How To Use Vertical TinyDropdown 2.

Published
Categorized as JavaScript

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top