< Back to Coding, jQuery

Slide Out Buttons

Here is an example of 2 buttons that when pressed, slide out the main content revealing new content. This could be used for mobile navigation/search/quick links etc.

The HTML is like so:

<body>
    <div class="container">
        <a href="#" class="leftBtn"><i class="fa fa-bars"></i></a>
        <a href="#" class="rightBtn"><i class="fa fa-user"></i></a>
        /* rest of main content
    </div>
    <div class="leftNav">
        left content
    </div>
    <div class="rightNav">
        right content
    </div>
</body>

Then in the js, you’d call

slideOutBtn("leftBtn","leftNav");
slideOutBtn("rightBtn","rightNav","right");

You don’t need to add “left” at the end, as that is the default.

View the demo

Download the demo

 

Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *