How to design side navigation for mobile using Sidetap plugin ?
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:
Contact Us