How to Create Slide Out Navigation Panel using jQuery

Submitted by alpha_luna on Tuesday, August 2, 2016 - 16:02.

In this tutorial, we are going to create Slide Out Navigation Panel using jQuery. This is a jQuery menu plugin that creating off-screen side panel menu navigation that every time you click the trigger it will slide out from the left side of your simple page that you created and your body content will move to the right of your page. This is how to use it, let’s start coding.

How to use it

First, we are going to create our side panel navigation menu as you can see in the image below. Result

Here's the source code.

    <nav id="menu" class="panel" role="navigation">
        <ul>
            <li><a style="text-decoration:none; font-size:25px; font-weight:bold;" href="http://www.sourcecodester.com/">Home</a></li>
            <li><a style="text-decoration:none; font-size:25px; font-weight:bold;" href="http://www.sourcecodester.com/programming">Programming</a></li>
            <li><a style="text-decoration:none; font-size:25px; font-weight:bold;" href="http://www.sourcecodester.com/mobile">Mobile</a></li>
            <li><a style="text-decoration:none; font-size:25px; font-weight:bold;" href="http://www.sourcecodester.com/blog">Blog</a></li>
            <li><a style="text-decoration:none; font-size:25px; font-weight:bold;" href="http://www.sourcecodester.com/article">Articles</a></li>
            <li><a style="text-decoration:none; font-size:25px; font-weight:bold;" href="http://www.sourcecodester.com/tutorial">Tutorials</a></li>
        </ul>
    </nav>

Second, creating a link to trigger our side panel navigation and it will slide out from the left side of the page as shown in the image below. Result

Here's the source code of the image above.

    <div class="wrap push">
        <a href="#menu" class="menu-link" style="text-decoration:none; font-size:30px; color:black; font-weight:bold;"><h2>&#9776;</h2></a>
    
        <h1>Free Source Code</h1>
 
        <p>Do you have source code, articles, tutorials, web links, and books to share? You can write your own content here. You can even have your own blog.</p>
                
                <a href="http://www.sourcecodester.com/submit" target="_new" style="text-decoration:none; color;blue; font-size:20px; color:blue; font-weight:bold;"><p>Submit now!</p></a>
                
        <p>The main purpose of this website is to help programmers by providing a free and complete source code that can be use in their own application. 
                I started SourceCodester.com since 2006 in the hope to provide a commercial product to everyone in the internet. But I change my mind. Instead of 
                accepting more clients from the internet I decided to share my source code because of the demand of my service locally.</p>
    </div>

Third, after constructing the side panel navigation and link, copy and paste this link before the end of your BODY tag to load the jQuery library and bigslide.js on your created page.

    <script src="jquery.min.js"></script>
 
    <script src="../dist/bigSlide.js"></script>

Lastly, copy and paste this plugin script before end of your BODY tag and that's it, we're done.

    <script>
        $(document).ready(function() {
            $('.menu-link').bigSlide();
        });
    </script>

Note: You can customize your menu whatever your desired design by changing the CSS.

Output

If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

98 views