<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Slide from top full screen overlay navigation</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="menu-btn"></div>
<nav>
<ul>
<li>
<ul class="sub-menu">
<li><a href="#">HOME</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT US</a></li>
</ul>
</li>
<li>
<span>What we have done</span>
<br>
<a href="#" class="orange">WEBDESIGN</a>
</li>
<li class="line">
<a href="#">UX DESIGN</a>
</li>
<li class="line">
<span>Meet our super heros</span>
<br>
<a href="#" class="red">THE TEAM</a>
</li>
<li class="line">
<span>Welcome to our superhero family</span>
<br>
<a href="#" class="green">JOIN IN</a>
</li>
<li>
<span>Sharing in caring</span>
<br>
<a href="#" class="darkblue">FACEBOOK</a>
</li>
<li><a href="#" class="blue">TWITTER</a></li>
</ul>
<div class="email-form">
<h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
<form>
<input type="email" class="field" placeholder="Enter your Email....">
<button>Let me in</button>
</form>
</div>
</nav>
<div class="container">
<h2>responsive full screen navigation menu that slides from top using a toggle button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, cupiditate, laboriosam quod maxime dignissimos modi officia sequi fugiat excepturi ut nam exercitationem voluptatum cumque velit quaerat alias quo debitis nesciunt.</p>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
@font-face {
font-family: 'redacted_scriptbold';
src: url('https://raw.githubusercontent.com/christiannaths/Redacted-Font/master/fonts/web/redacted-script-bold.eot');
src: url('https://raw.githubusercontent.com/christiannaths/Redacted-Font/master/fonts/web/redacted-script-bold.eot?#iefix') format('embedded-opentype'),
url('https://raw.githubusercontent.com/christiannaths/Redacted-Font/master/fonts/web/redacted-script-bold.woff') format('woff'),
url('https://raw.githubusercontent.com/christiannaths/Redacted-Font/master/fonts/web/redacted-script-bold.ttf') format('truetype'),
url('https://raw.githubusercontent.com/christiannaths/Redacted-Font/master/fonts/web/redacted-script-bold.svg#redacted_scriptbold') format('svg');
font-weight: normal;
font-style: normal;
}
.container p{
text-align: left;
margin: 0 auto;
padding: 10px 0;
color: #ddd;
line-height: 25px;
font-size: 22px;
font-family: 'redacted_scriptbold', Arial, serif;
}
.container h2{
font-family: 'redacted_scriptbold', Arial, serif;
font-size: 30px;
color: #4e4e4e;
line-height: 30px;
}
.container{
max-width: 900px;
margin: 0 auto;
}
body,ul,li{
padding: 0;
margin: 0;
}
ul, li{
list-style: none;
}
a{
text-decoration: none;
color: #888;
}
nav .orange{
color: #e88873;
}
nav .red{
color: #fd5f65;
}
nav .green{
color: #59b76f;
}
nav .darkblue{
color: #3f75aa;
}
nav .blue{
color: #65c6ea;
}
nav a:hover{
color: #414141;
}
.open{
top: 0;
}
.menu-btn{
cursor: pointer;
background-image: url('http://thecodeblock.com/wp-content/uploads/btn-hamburger.png');
height: 60px;
width: 60px;
background-size: cover;
background-color: #000;
display: inline;
z-index: 99;
position: fixed;
top: 0;
right: 0;
}
.close-btn{
background-image: url('http://thecodeblock.com/wp-content/uploads/btn-close.png');
}
nav{
position: absolute;
top: -1600px;
left: 0;
right: 0;
background: #fff;
transition: all 0.5s;
font-family: arial;
}
nav > ul{
max-width: 900px;
margin: 10px auto;
text-align: center;
}
nav > ul > li > a{
font-size: 72px;
font-weight: bold;
padding: 10px 0 40px 0;
display: block;
}
nav > ul > li{
padding: 40px 0 0 0;
}
nav > ul > li span{
font-style: italic;
font-size: 20px;
padding-bottom: 20px;
color: #adadad;
}
.line{
border-bottom: 1px solid #e0e0e0;
}
.sub-menu{
border-bottom: 1px solid #e0e0e0;
padding-bottom: 30px;
}
.sub-menu li{
display: inline-block;
font-size: 18px;
margin: 10px;
font-weight: bold;
}
nav .email-form{
background: #65c6ea;
}
nav .email-form h2{
font-size: 44px;
text-align: center;
padding-top: 40px;
color: #fff;
}
nav .email-form form{
max-width: 500px;
margin: 0 auto;
padding: 0 0 50px 0;
}
nav .email-form form .field{
padding: 10px;
margin: 0;
width: 70%;
box-sizing:border-box;
border: none;
font-size: 24px;
color: #414141;
}
nav .email-form form button{
background: #fff;
border: none;
margin: 0;
font-size: 24px;
padding: 10px 12px;
cursor: pointer;
}
@media all and (max-width: 500px){
nav > ul > li > a{
font-size: 44px;
}
nav .email-form h2{
font-size: 24px;
}
nav .email-form form .field{
width: 100%;
margin-bottom: 10px;
}
nav .email-form form button{
width:300px;
width:100%
}
}
$(document).ready(function(){
$('.menu-btn').click(function(){
$('nav').toggleClass('open');
$(this).toggleClass('close-btn');
$('.container').toggle();
})
})