davidroyer
8/8/2015 - 10:15 PM
Navigation Cover Nav Drawer
Navigation Cover Nav Drawer
.dark-primary-color { background: #303F9F; }
.default-primary-color { background: #3F51B5; }
.light-primary-color { background: #C5CAE9; }
.text-primary-color { color: #FFFFFF; }
.accent-color { background: #448AFF; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #727272; }
.divider-color { border-color: #B6B6B6; }
li {
list-style: none;
}
a {
text-decoration: none;
}
.header {
background: #303F9F;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height:80px;
z-index: 60;
&__site-title {
text-align: left;
margin-left: 30px;
font-size: 1.6rem;
padding-top: 10px;
}
}
.main {
background: white;
height: 100%;
position: relative;
top: 70px;
z-index: 20;
background: white;
height: 100vh;
position: relative;
top: 80px;
z-index: 40;
width: 100%;
padding: 40px;
}
.nav-toggle {
position: fixed;
top: 20px;
right: 30px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.46), 0 2px 10px 0 rgba(0, 0, 0, 0.42);
border-radius: 50%;
padding: 8px 10px;
background-color: white;
&__icon {
color: #545767;
font-size: 24px;
}
}
.nav-toggle__icon--close {
position: fixed;
top: 30px;
right: 30px;
}
.nav {
background: #C5CAE9;
position: fixed;
z-index: 10;
top: 0;
right: 0;
width: 200px;
height: 100%;
visibility: visible;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.46), 0 2px 10px 0 rgba(0, 0, 0, 0.42);
transition: all .3s ease;
transform: translateX(200px);
overflow: hidden;
&--open {
transform: translateX(0);
}
&__list {
padding-top: 65px;
text-align: right;
padding-right: 30px;
height: 100%;
overflow-y: auto;
}
&__list-item {
margin: 40px 0;
&:last-of-type {
padding-bottom: 100px;
}
}
&__link {
font-weight: bold;
padding: 10px 0;
display: block;
}
}
p {
margin-top: 0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
(function() {
var navToggle = $('.nav-toggle');
navToggle.on('click', openNavDrawer);
function openNavDrawer(event) {
event.preventDefault();
$('.nav').toggleClass('nav--open');
$('.main').toggleClass('main--open');
}
})();<body>
<header class="header">
<h1 class="header__site-title">Nav Drawer Cover</h1>
<a href="#" class="nav-toggle"><i class="nav-toggle__icon fa fa-bars"></i></a>
<nav class="nav">
<a href="#" class="nav-toggle"><i class="nav-toggle__icon fa fa-close"></i></a>
<ul class="nav__list">
<li class="nav__list-item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__list-item"><a class="nav__link" href="#">About</a></li>
<li class="nav__list-item"><a class="nav__link" href="#">Services</a></li>
<li class="nav__list-item"><a class="nav__link" href="#">Portfilio</a></li>
<li class="nav__list-item"><a class="nav__link" href="#">Media</a></li>
<li class="nav__list-item"><a class="nav__link" href="#">Contact</a></li>
</ul>
</nav>
</header>
<main class="main">
<p>Some text goes here</p>
<br />
<p>Some text goes here</p>
<br />
<p>Some text goes here</p>
<br />
</main>
<!--<nav class="mobile-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>-->
</body>