< 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


Leave a Reply

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