<div class="navbar">
<div class="menu icon-menu"></div>
<div class="settings icon-search"></div>
</div>
<nav role='navigation'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="search">
<h1>Search:</h1><input type="search" />
</div>
*{
transition: all 0.2s ease-in-out;
font-family: Arial;
}
html,body{
height: 100%;
width: 100%;
padding:0;
margin:0 auto;
}
ul,li{
padding:0;
margin:0 auto;
}
[class*='icon']{
display: inline-block;
margin: 16px;
margin-top: 10px;
font-size: 24px;
text-align: center;
color: #fff;
font-size: 3em;
cursor:pointer;
&:hover{
color: #e1e1e1;
}
}
.navbar{
background:#09c;
width: 100%;
height: 75px;
position: absolute;
z-index: 99999;
box-shadow: 0 0 10px #000;
}
.menu{
position: absolute;
left:0;
}
.settings{
position: absolute;
right:0;
}
.icon-menu{
}
nav{
position: absolute;
background: darken(#0099cc, 10%);
width: 100%;
left:0;
top: -100%;
z-index: 999;
transition-timing: 1s;
box-shadow: 0 0 10px #000;
li{
list-style:none;
text-align:center;
a{
display:block;
padding: 15px;
color: #fff;
text-decoration: none;
font-size: 24pt;
&:hover{
background: darken(#0099cc, 5%);
text-decoration: underline;
}
}
}
}
.search{
position: absolute;
background: darken(#0099cc, 10%);
width: 100%;
left:0;
top: -100%;
z-index: 999;
transition-timing: 1s;
box-shadow: 0 0 10px #000;
padding: 15px;
line-height: 75px;
h1{
float:left;
margin: 0;
color: #fff;
padding-right: 25px;
font-weight: normal;
}
input[type='search']{
padding: 10px;
width: 250px;
}
}
.down{
top: 74px;
}
View Compiled
// drop down the menu, and swap the icon to the close icon
$('.menu').click(function(){
$(this).toggleClass('icon-menu');
$(this).toggleClass('icon-cross');
$('nav').toggleClass('down');
$('nav li a').removeClass('down');
$('.search').removeClass('down');
$('.icon-search').removeClass('icon-cross');
});
//Make sure the menu icon behaves corectly when the menu is open
$('nav li a').click(function(){
$('.menu').addClass('icon-menu');
$('.menu').removeClass('icon-cross');
$('nav').toggleClass('down');
});
//show and hide the search bar, also make sure if the menu is open to hide the menu, and ensure the menu icon state is correct
$('.icon-search').click(function(){
$(this).toggleClass('icon-cross');
$('.menu').addClass('icon-menu');
$('.menu').removeClass('icon-cross');
$('.search').toggleClass('down');
$('nav').removeClass('down');
});
