Most of the mobile responsive websites have their own menu style when viewed on mobile or tablets. Today, we will create a simple jquery and css driven slide push menu.
Files Needed
index.htmlmain.jsstyle.css
index.html file
<html>
<head>
<title>jQuery CSS Slide Push Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- slide push menu -->
<div id="push-menu" data-view="hidden">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<!-- main page -->
<div class="main-wrapper">
<div class="container">
<h1>jQuery CSS Slide Push Menu</h1>
<button class="btn-push">Click to push the menu!</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- scripts here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
$(document).ready(function() {
$('.btn-push').on('click', function() {
if ($('#push-menu').attr('data-view') == 'hidden') {
$('.main-wrapper').animate({
right: '250px'
}, 200);
$('#push-menu').attr('data-view', 'visible');
} else {
$('.main-wrapper').animate({
right: '0px'
}, 200);
$('#push-menu').attr('data-view', 'hidden');
}
});
});
style.css to handle styling of the menu.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end css reset */
html, body {
height: 100%;
}
body {
background-color: #fff;
font-family: Verdana,sans-serif;
min-height: 100%;
overflow-x: hidden;
}
.container {
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 30px 15px;
width: 970px;
}
h1 {
font-size: 36px;
margin-bottom: 25px;
}
p {
color: #888;
font-size: 16px;
line-height: 25px;
padding: 8px 0;
}
button {
background-color: #f4f5f6;
border: 1px solid #ddd;
border-radius: 4px;
color: #545454;
cursor: pointer;
padding: 8px 12px;
}
button:hover,
button:focus {
background-color: #f1f2f3;
}
#push-menu {
background-color: #545454;
height: 100%;
padding-top: 24px;
position: absolute;
right: 0;
top: 0;
width: 250px;
z-index: 1;
}
#push-menu ul li a {
display: block;
padding: 12px 15px;
color: #f5f5f5;
border-bottom: 1px solid rgba(0,0,0,0.15);
text-decoration: none;
}
#push-menu ul li a:hover {
color: yellow;
}
.main-wrapper {
background-color: #fff;
position: relative;
z-index: 2;
}
Now, when you click the button, the menu will just simply slide.
That's it! Just another jquery css slide push menu for your site.
0 comments :
Post a Comment