Sexy sliding JavaScript side bar menu using mootools

Now for this solution I decided to use mootools due to thesmoothness of their effects, however, this could just as easily bedeveloped in script.aculo.us or other JavaScript libraries.

code

The code is very simple and is as follows:

CSS

    body{
       position:relative;
       paddign:0px;
       font-size:100%;
   }

    h2{
        color:#FFFFFF;
        font-size:90%;
        font-family:arial;
        margin:10px 10px 10px 10px;
        font-weight:bold;
    }

    h2 span{
        font-size:105%;
        font-weight:normal;
    }

    ul{
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
    }

    li{
        margin:0px 10px 3px 10px;
        padding:2px;
        list-style-type:none;
        display:block;
        background-color:#DA1074;
        width:177px;
    }

    li a{
        width:100%;
    }

    li a:link,
    li a:visited{
        color:#FFFFFF;
        font-family:verdana;
        font-size:70%;
        text-decoration:none;
        display:block;
        margin:0px 0px 0px 0px;
        padding:0px;
        width:100%;
    }

    li a:hover{
        color:#FFFFFF;
        text-decoration:underline;
    }

    #sideBar{
        position: absolute;
        width: auto;
        height: auto;
        top: 200px;
        right:-7px;
        background-image:url(images/background.gif);
        background-position:top left;
        background-repeat:repeat-y;
    }

    #sideBarTab{
        float:left;
        height:137px;
        width:28px;
    }

    #sideBarTab img{
        border:0px solid #FFFFFF;
    }

    #sideBarContents{
        overflow:hidden !important;
    }

    #sideBarContentsInner{
        width:200px;
    }

HTML

<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>side<span>bar</span></h2>

            <ul>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>

        </div>
    </div>

</div>

As shown the code is not overly complex. The HTML comprises acontaining DIV (with an ID of sideBar), then within this we have alinked tab image (with an ID of sideBarTab) followed by the contents ofthe side bar contained in a DIV (with an ID of sideBarContents) and subcontained within another DIV (with an ID of sideBarContentsInner).
The sideBarContents DIV has an inline style applied setting thewidth to zero. This is to allow the JavaScript to resize the regionusing mootools (Some browsers are a bit buggy when trying to changestyles that are set in an external stylesheet). This DIV is also set tohave an overflow hidden producing the effect that the content issliding in.
Points to note within the CSS include the width set on thesideBarContentsInner DIV. This width should be adjusted as required tomeet your deign requirements (It is set to 200px for the purpose of thedemonstration).
Also to reposition the bar simply adjust the postioning styles applied on the sideBar DIV (i.e. right and top).
Finally you will need to include mootools.js and side-bar.js to thehead of the document in the order shown for this to work. Have a playwith the demo below and download the code.

demo

The sliding JavaScript side bar menu demo.

pitfalls

Currently with this version I believe there may be some CSS issuesin Safari but as yet I haven’t had the time to fully test and fixpotential bugs.
The next pitfall to note is the lack of degradability with JavaScript turned off, however, this will be fixed as stated below.

future

I am planning to develop a new version of the side bar that willdegrade gracefully back into the structure of the site when JavaScriptis turned off. This will provide a more accessible version.
Further improvements include adding a key press event to the taballowing users without a mouse to produce the same effect (againimportant for accessibility).
Other considered enhancements include the introduction of multipletabs. This would allow for greater “storage space”, whilst alsoproviding flexibility and scalability.

welcome blog

Senin, 11 Januari 2010