Skip to content
Related Articles

Related Articles

How to design side navigation for mobile using Sidetap plugin ?

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Nov, 2020
View Discussion
Improve Article
Save Article

In this article, we will learn how to design side navigation feature for mobile web interface using Sidetap plugin. This plugin is a very lightweight and platform-independent framework and gives easy to use syntax and flexibility. It is completely based on HTML, JavaScript and CSS.

Please download the required pre-compiled file from the link and save it in your working folder for implementation. Please take care of proper file paths while including in your source codes. 


  1. Create the HTML structure: The Sidetap plugin uses a very specific HTML structure with all the pre-compiled libraries in the head section as given below in the final code. The plugin specific classes are used with HTML “div” having navigation panel with class=”stp-nav” and content panel with class=”stp-content-panel”. The class used for the main body content is class=”stp-content-body”.

  2. Instantiate Sidetap: In your mobile web app, the following syntax is used to create a reference to Sidetap. This is written in the script section of the HTML code.

    var my_variable = new sidetap();

Final code:

<!DOCTYPE html>
    <meta charset='utf-8' />
    <meta name="viewport" content=
        initial-scale=1, maximum-scale=1" />
    <!-- Sidetap libraries -->
    <link type="text/css" rel="stylesheet" 
        media="screen" href="sidetap.css" />
    <link type="text/css" rel="stylesheet" 
        href="theme/default/default.css" />
    <!-- Sidetap libraries -->
    <div class="sidetap">
        <div class="stp-nav">
                <!-- The sidetap navigation links 
                    can be given here -->
                    <a href="#" class="selected">
                        First Navigation(selected)
                    <a href="#">Second Nav link</a>
                    <a href="#">Third nav link</a>
                    <a href="#">Fourth Nav link</a>
        <div class="stp-content" id="content">
            <!-- Content Divs  -->
            <div class="stp-content-panel">
                <!-- The header contains the 
                    class for menu icon -->
                    <a href="javascript:void(0)" 
                        class="header-button icon menu">
                    <h1> Sidetap Plugin</h1>
                <div class="stp-content-frame">
                    <div class="stp-content-body">
                            <p>Body content.</p>
            <!-- End content Div -->
    <!-- The jQuery library -->
    <script type="text/javascript" 
    <!-- The JavaScript library for 
        Sidetap plugin -->
    <script type="text/javascript" 
        /* Instantiate sidetap in the top 
        left side, refer output */
        var sidetapVar = sidetap();
        /* On click of the header menu 
        button icon */
        /* The navigation is toggled */
            .on("click", sidetapVar.toggle_nav)


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!