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: