Facebook App-Style jQuery Side Mobile Menu Plugin
| File Size: | 4.13KB |
|---|---|
| Views Total: | 9647 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
An ultra-light (~2kb unminified) jQuery menu plugin that make it easily to create responsive Facebook & Path App-style side menus on your mobile & desktop website. The side menu slides out from the left side of your web page and pushes the main content to the right.
See also:
Basic Usage:
1. Include the jQuery javascript library and jQuery facebook-style slide mobile menu on the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/slide-menu.js"></script>
2. Add the following HTML snippet to the <body> section of your webpage.
<!-- Mobile Header --> <div class="mobile-header"> <ul class="clearfloat"> <li class="m-menu"> <a><span class="menu-open">Menu</span><span class="menu-close">Close</span></a> </li> </ul> </div> <div id="container-outer"> <!-- Mobile Menu START --> <div class="mobile-menu"> Menu content to go here </div> <!-- Main Content --> <div id="container"> <div id="container-inner"> Main content to go here </div> </div> <div class="mobile-menu-bg"></div> </div>
3. Add the following styles to your CSS file.
/* Layout */
#container-outer, #container {
width: 100%;
overflow: hidden;
display: block;
position: relative;
}
#container-inner {
max-width: 880px;
overflow: hidden;
display: block;
padding: 50px;
margin: 50px auto;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
background: #ffffff;
}
/* Mobile Menu */
.mobile-header {
line-height: 100%;
width: 100%;
display: block;
position: relative;
z-index: 30;
background: #ffffff;
z-index: 9999;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.mobile-header ul {
margin: 0px;
padding: 0px;
z-index: 30;
list-style: none;
}
.mobile-header ul li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
position: relative;
z-index: 30;
width: 25%;
}
.mobile-header ul li a {
margin: 0px;
padding: 20px 0px;
width: auto;
display: block;
background: none;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #888888;
cursor: pointer;
border-right: 1px solid #eeeeee;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
text-transform: uppercase;
}
.mobile-header ul li.m-menu a {
font-weight: 700;
}
.mobile-header ul li a:hover, .mobile-header ul li.active, .mobile-header ul li.active a {
color: #ffffff;
background: #77c043;
}
.mobile-header ul li a:hover, .mobile-header ul li.active a {
border-right: 1px solid #63A832;
}
.mobile-header ul li a span.menu-open, .mobile-header ul li.active a span.menu-close {
display: inline;
}
.mobile-header ul li.active a span.menu-open, .mobile-header ul li a span.menu-close {
display: none;
}
/* Mobile Menu */
.mobile-menu {
/* background: #222222; */
margin: 0px;
padding: 30px;
width: 140px;
text-transform: none;
font-size: 12px;
position: absolute;
top: 72px;
bottom: 0px;
left: -200px; /* Hides Brief Menu Popup As JavaScript Loads */
z-index: 9998;
display: block;
height: 100%;
overflow: hidden;
color: #ffffff;
}
.mobile-menu.active {
height: auto;
overflow: visible;
}
.mobile-menu-bg {
background: #222222;
margin: 0px;
position: fixed;
width: 200px;
top: 0px;
bottom: 0px;
left: -200px; /* Hides Brief Menu Popup As JavaScript Loads */
z-index: 9997;
display: block;
height: 100%;
-webkit-box-shadow: inset 0px 0px 100px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 0px 100px 0px rgba(0, 0, 0, 1);
}
.mobile-menu.active, .mobile-menu-bg.active {
display: block;
}
/* Floats */
.clearfloat:after {
content: "";
display: table;
clear: both;
}
This awesome jQuery plugin is developed by MartinKrestan. For more Advanced Usages, please check the demo page or visit the official website.
