Today i am going to tell you how to create slide menu from left side. This will done by using simple Jquery and css. This type of concept really helps for mobile view to display the menu in different format. This is very easy to create use the below html code to display menu.
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
<h3>Menu</h3>
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Vision & Mission</a>
<a href="#">Services</a>
<a href="#">About our Product</a>
<a href="#">Contact us</a>
</nav>
The below code is to display the "slide left menu" button and css for decorate the slide left menu.
<section>
<button class="toggle-menu menu-left">Slide Left Menu</button>
</section>
.main > section button {
border: none;
background: #47a3da;
color: #fff;
padding: 1.5em;
cursor: pointer;
margin: 10px 0;
font-size: 0.8em;
margin-left:250px;
}
.main > section button:hover {
background: #258ecd;
}
.main > section button.active {
background: #0d77b6;
}
.main > section button.disabled {
background: #aaa;
pointer-events: none;
}
This system is when you click the slide left menu button it displays the slide menu from the left side with slide effect. This is very useful for webpages because this types of menu will not disturb any of the data in the particular webpage and also it won't take any space in webpages it hides until you click the button. After you click the button it shows the menu then again when you click the same button or empty places anywhere of the webpage again it will disappear. This is fully act like as a toggle menu.
The below is the live demo and example code you can download it free and use it for your websites according to your choice. I hope this post is very useful.
Code for Create Left slide menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Left Slide Menu using Jquery</title>
<meta name="description" content="Left slider menu using jquery" />
<meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery, mobile menu" />
<link rel="stylesheet" type="text/css" href="css/jPushMenu.css" />
<style>
.main > section button {
border: none;
background: #47a3da;
color: #fff;
padding: 1.5em;
cursor: pointer;
margin: 10px 0;
font-size: 0.8em;
margin-left:250px;
}
.main > section button:hover {
background: #258ecd;
}
.main > section button.active {
background: #0d77b6;
}
.main > section button.disabled {
background: #aaa;
pointer-events: none;
}
</style>
</head>
<body>
<?php
include('header.php');
?>
<div style="height:150px;"> </div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
<h3>Menu</h3>
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Vision & Mission</a>
<a href="#">Services</a>
<a href="#">About our Product</a>
<a href="#">Contact us</a>
</nav>
<div class="container">
<div class="main">
<section>
<button class="toggle-menu menu-left">Slide Left Menu</button>
</section>
</div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jPushMenu.js"></script>
<script>
jQuery(document).ready(function($) {
$('.toggle-menu').jPushMenu();
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Left Slide Menu using Jquery</title>
<meta name="description" content="Left slider menu using jquery" />
<meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery, mobile menu" />
<link rel="stylesheet" type="text/css" href="css/jPushMenu.css" />
<style>
.main > section button {
border: none;
background: #47a3da;
color: #fff;
padding: 1.5em;
cursor: pointer;
margin: 10px 0;
font-size: 0.8em;
margin-left:250px;
}
.main > section button:hover {
background: #258ecd;
}
.main > section button.active {
background: #0d77b6;
}
.main > section button.disabled {
background: #aaa;
pointer-events: none;
}
</style>
</head>
<body>
<?php
include('header.php');
?>
<div style="height:150px;"> </div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
<h3>Menu</h3>
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Vision & Mission</a>
<a href="#">Services</a>
<a href="#">About our Product</a>
<a href="#">Contact us</a>
</nav>
<div class="container">
<div class="main">
<section>
<button class="toggle-menu menu-left">Slide Left Menu</button>
</section>
</div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jPushMenu.js"></script>
<script>
jQuery(document).ready(function($) {
$('.toggle-menu').jPushMenu();
});
</script>
</body>
</html>
0 Comments