jQuery Mobile Based Slide Swipeable Side Menu
Today, We want to share with you jQuery Mobile Based Slide Swipeable Side Menu.
In this post we will show you Responsive Mobile Menu in Bootstrap, hear for Touch Swipeable Sidebar Menu with jQuery we will give you demo and example for implement.
In this post, we will learn about Simple jQuery and jQuery Mobile Based Slide Menu Plugin with an example.
A mobile friendly side-bar menu off-canvas side navigation custom built with used to jQuery and CSS that allows we to reveal and hide toggle the side menu effective with touch swipe events generates using jQuery touchSwipe plugin created.
How to use it: Steps By Steps
Step 1. Simple Create a side menu for your web-apps page.
<div id="sidebar"> <ul> <li><a href="#">Laravel</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Angularjs</a></li> <li><a href="#">Vue.js</a></li> <li><a href="#">Magento</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> </ul> </div>
Step 2.Simple Create a hamburger toggle using jQuery which allows the visitor show and hide or to open / close the side navigation menu by clicking.
<a href="#" data-toggle=".container" id="sidebar-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a>
Step 3.Simple Create an empty element here for the swipe area.
<div class="swipe-area"></div>
Step 4.Then wrap content them with your main site display content into a container data. and then The full markup structure data should be like this:
<div class="container">
<div id="sidebar">
<ul>
<li><a href="#">Laravel</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Angularjs</a></li>
<li><a href="#">Vue.js</a></li>
<li><a href="#">Magento</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<a href="#" data-toggle=".container" id="sidebar-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="content">
<h1>Creating Swipeable Side Menu For the Web</h1>
<p>"Hello! I am angular king and pakainfo is my web technologies blog. My specialities are angularjs,PHP, API, jQuery, eCommerce,JS,Laravel, CMS and bespoke web application development."
<a class="demo-css" href="https://www.pakainfo.com/pakainfo/angular/autocomplete.html" target="_blank" rel="nofollow">View Demo</a>
</p>
</div>
</div>
</div>
Step 4.The core simple CSS data styles and CSS3 styles.
<style type="text/css">
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container.open-sidebar {
left: 240px;
}
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar {
background: #DF314D;
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin: 0;
}
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: white;
text-decoration: none;
display: block;
border-bottom: 1px solid #C9223D;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
background: #C9223D;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content{
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
font-weight: 100;
}
.main-content .content p{
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: #DF314D;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar{
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
margin-bottom: 0;
}
</style>
Step 6. Include The jQuery library and jQuery touchSwipe plugin in the web-application page.
<script src="jquery-2.1.4.min.js"></script> <script src="jquery.touchSwipe.min.js"></script>
Step 7.Here Enable the swipeable Include jQuery in side menu.
<script type="text/javascript">
$(window).load(function(){
$("[data-toggle]").click(function() {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
</script>
We hope you get an idea about jQuery Mobile Based Slide Swipeable Side Menu
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.