Java Script Floating Verticle Sidemenu like JQuery

July 18, 2011

Now a days you have seen a floating menu, or a box in the right or left corner of many websites for feedback, contacts or for any other purpose. That is nothing but a jquery and jquery is advanced type of javascript. So here bellow is the code in Javascript is simple and easy.

Copy the code and paste, a couple of images are also used. You can change the width and height according to your requirements.

<!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>Slide Menu</title>
<style type="text/css">
*
{
    margin:0px;
    padding:0px;
}

body
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

#sidemenu
{
    top:100px;
    width:60px;
    height:400px;
    position:fixed;
/*    border:solid 1px red;    */
}

#sidemenu img
{
    margin-top:100px;
    cursor:pointer;
    position:fixed;
}

#menulist
{
    background:url(images/back.png) repeat-y;
    float:left;
    width:0px;
    height:400px;
    border-right: solid 1px #ebe3e0;
    border-top: solid 1px #ebe3e0;
    border-bottom: solid 1px #ebe3e0;
    /*    border:solid 1px red;    */
}

#menulist ul
{
    position:absolute;
    display:none;
    list-style-type:none;
    margin-top:10px;
}
#menulist ul li
{
    padding:4px;
    margin-left:10px;
}

#menulist ul li a
{
    text-decoration:none;
    font-size:14px;
    color:#333333;
}

#menulist ul li a:hover
{
    color:#ff0000;
}
</style>

<script type="text/javascript" language="javascript">
function menuclick(ctrl)
{
    var pos = parseInt(ctrl.offsetLeft);

    if(pos > 10)
    {
        pullinmenu();
    }
    else
    {
        pulloutmenu();
    }
}
function pulloutmenu()
{
    slidein(10);
}

function pullinmenu()
{
    var menuwidth = parseInt(document.getElementById('menulist').style.width);
    slideout(menuwidth);
}

function slidein(val)
{
    var menu = document.getElementById('sidemenu');
    var menulist = document.getElementById('menulist');
    var menuul = document.getElementById('slidemenu');

    if(val <= 200)
    {
        setTimeout(function(){slidein(val);}, 5);
    }

    if(val <= 200)
    {
        menu.style.width = parseInt(val+=5) +'px';
    }

    if(val <= 140)
    {
        menulist.style.width = parseInt(val+=5) +'px';
    }

    if(val > 160)
    {
            menuul.style.display = 'block';
    }
}

function slideout(val)
{
    var menu = document.getElementById('sidemenu');
    var menulist = document.getElementById('menulist');
    var menuul = document.getElementById('slidemenu');

    if(val >= 4)
    {
        setTimeout(function(){slideout(val);}, 1);
        menulist.style.width = parseInt(val-=4) +'px';
        if(val>=58)
        {
            menu.style.width = parseInt(val-=4) +'px';
        }
    }

    if(val < 60)
    {
        menuul.style.display = 'none';
    }
}
</script>
</head>

<body>
<div id="sidemenu">
<div id="menulist">
    <ul id="slidemenu">
    <li><a href="#">Product One</a></li>
    <li><a href="#">Product Two</a></li>
    <li><a href="#">Product Three</a></li>
    <li><a href="#">Product Four</a></li>
    <li><a href="#">Product Five</a></li>
    <li><a href="#">Product Six</a></li>
    <li><a href="#">Product Seven</a></li>
    </ul>
</div>
<img src="images/sidemenu.png" alt="sidemenu" onclick="menuclick(this);"/>
</div>
</body>
</html>

Screenshots:-