<!doctype html>
<html class="no-js" lang="">
<head>
<style>
#mask {
background-color: rgba(41, 47, 51, 0.9);
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 120%;
z-index: 500;
display: none;
}
.mobNav {
position: fixed;
width: 270px;
right: -270px;
top: 0px;
bottom: 0px;
background-color: #FFF;
z-index: 600;
box-shadow: -5px -4px 10px -8px #222;
overflow: auto;
transition: all 0.4s ease 0s;
}
.mobNav ul {
margin: 15px 0px 0px;
list-style-type: none;
padding: 0px;
}
.mobNav ul li {
margin: 0px;
display: block;
text-align: left;
padding: 5px 20px;
}
.mobNav ul li a {
padding: 4px 0px 14px;
border-bottom: 1px solid rgba(130, 141, 161, 0.2);
color: #587883;
text-decoration: none;
text-transform: uppercase;
font-size: 1em;
font-weight: 500;
display: block;
}
</style>
</head>
<body>
<div id="mask"></div>
<div class="mobNav">
<ul>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
</ul>
</div>
<span class="mobShow">OPEN NAV</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
// Click to show Nav and mask
$('.mobShow').click(function () {
$('#mask').fadeIn(500);
$('.mobNav').css('right','0');
});
// Click to hide nav and mask
$('#mask').click(function () {
$('.mobNav').css('right','-270px');
$('#mask').fadeOut(500);
});
});
</script>
</body>
</html>
Reveal a slide out menu for mobile navigation.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.