Skip to content
Related Articles

Related Articles

Improve Article

How to design side navigation for mobile using Sidetap plugin ?

  • Last Updated : 05 Nov, 2020

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)


Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :