< 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:

    <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 class="leftNav">
        left content
    <div class="rightNav">
        right content

Then in the js, you’d call


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 *