Slide Out Buttons

Posted on

in

,

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

 

Leave a Reply

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

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

May 2024
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031