Sliding Side Menu

User Rating: / 0
PoorBest 

In this tutorial a will present a menu very intresting. It is about menu that load by clicking and also disappear on the click button, n short is an activation button and one for hiding. Is achieved with HTML, CSS and Mootools.

In the HEAD section you must link the css and the scripts with html:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/side-menu.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

In the BODY section create the html buttons:

<div id="sideBar">
   
    <a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
   
    <div id="sideBarContents" style="width:0px;">
        <div id="sideBarContentsInner">
            <h2><span> Main Menu</span></h2>
           
            <ul>
                <li><a href="#"><div class="text">Home </div> </a></li>
                <li><a href="#"><div class="text">About Us</div></a></li>
                <li><a href="#"><div class="text">Services</div></a></li>
                <li><a href="#"><div class="text">Gallery</div></a></li>
                <li><a href="#"><div class="text">Contact</div></a></li>
            </ul>
           
        </div>
    </div>
  
</div>

Now let's create the CSS file:

    body{
        position:relative;
        paddign:0px;
        font-size:100%;
        background:url(images/background.png) repeat top center;
    }
   
    h2{
        color:#FFFFFF;
        font-size:90%;
        font-family:arial;
        margin:10px 10px 10px 10px;
        font-weight:bold;
    }
   
    h2 span{
        font-size:25px;
        font-weight:normal;
        font-family:Cambria, Arial, Helvetica, sans-serif;
    }
   
    ul{
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
    }
   
    li{
        margin:3px 10px 3px 10px;
        list-style-type:none;
        display:block;
        background-color:#0095E9; /* here is the color of the menu */
        width:177px;
        height:25px;
    }
   
    li a{
        width:100%;
    }
   
    li a:link,
    li a:visited{
        color:#FFFFFF; /* color of the text */
        font-family:Cambria, Arial, Helvetica, sans-serif;
        font-size:18px;
        text-decoration:none;
        display:block;
        margin:0px 0px 0px 0px;
        padding:0px;
        width:100%;
        outline:none;
       
    }
   
    li a:hover{
        color:#0095E9; /* color of the hover text */
        text-decoration:none;
        background-color:#fff; /* here is the color of the menu when the mouse is over */
        height:25px;
       
    }
   
    #sideMenu{                   /* here set the position of the menu in the web page */       

        position:relative;
        width: auto;
        height: auto;
        top: 180px;
        left:-7px;
        background: #20272b;
        background-position:top left;
        background-repeat:repeat-y;
        float:left;
   
    }
   
    #sideMenuTab{
        float:left;
        height:137px;
        width:28px;
        outline:none
    }
   
    #sideMenuTab img{
        border:0px solid #FFFFFF;
        float:left;
    }
   
    #sideMenuContents{
        overflow:hidden !important;
        float:left;
    }
   
    #sideMenuContentsInner{
        width:200px;
        float:left;
        margin-left:10px;
        }
       
    .text {
    margin-left:10px;
    margin-top:5px;   
    }

The  Javascript file look like:

var isExtended = 0;
var height = 450;
var width = 220;
var slideDuration = 800;
var opacityDuration = 800;

function extendContract(){
   
    if(isExtended == 0){
       
        sideMenuSlide(0, height, 0, width);
       
        sideMenuOpacity(0, 1);
   
        isExtended = 1;
       
        // make expand tab arrow image face left (inwards)
        $('sideMenuTab').childNodes[0].src = $('sideMenuTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
       
    }
    else{
       
        sideMenuSlide(height, 0, width, 0);
       
        sideMenuOpacity(1, 0);
       
        isExtended = 0;
       
        // make expand tab arrow image face right (outwards)
       
        $('sideMenuTab').childNodes[0].src = $('sideMenuTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
    }

}

function sideMenuSlide(fromHeight, toHeight, fromWidth, toWidth){
        var myEffects = new Fx.Styles('sideMenuContents', {duration: slideDuration, transition: Fx.Transitions.linear});
        myEffects.custom({
             'height': [fromHeight, toHeight],
             'width': [fromWidth, toWidth]
        });
}

function sideMenuOpacity(from, to){
        var myEffects = new Fx.Styles('sideMenuContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
        myEffects.custom({
             'opacity': [from, to]
        });
}

function init(){
    $('sideMenuTab').addEvent('click', function(){extendContract()});
}

window.addEvent('load', function(){init()});

The last step is to Download the scripts which includes all you need!