Open In App

How to design side navigation for mobile using Sidetap plugin ?

Last Updated : 16 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output: 

 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads