How to design side navigation for mobile using Sidetap plugin ?

Last Updated : 16 Jan, 2023

In this article, we will learn how to design side navigation features for mobile web interfaces 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.

Approach:

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”.
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:

html

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