<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<link href="http://www.wiseberry.com.au/css/wiseberry-icons.css" rel="stylesheet" media="screen">
<div class="container">
<div class="row">
<div class="[ col-xs-12 ] search-params">
<h4>Search</h4>
<p> <span class="param">For Sale</span> | <span class="param">House</span> | <span class="param">Baulkham Hills, Castle Hill Kellyville</span> | <span class="param"><strong>4</strong> <span class="wb wb-beds"></span></span> | <span class="param"><strong>2</strong> <span class="wb wb-baths"></span></span> | <span class="param"><strong>2</strong> <span class="wb wb-cars"></span></span> | <span class="param">$Min 500K</span> | <span class="param">$Max $900K</span> <span class="fa fa-search-plus nav-controller psuedo-link pull-right">Refine</span></p>
</div>
</div>
<div class="row">
<div class="[ col-xs-12 col-sm-6 col-md-4 ]">
<h2>MENU</h2>
<span class="console"></span>
<p>So When I came across this site called <a href="https://svbtle.com">Svbtle</a> today (June 25th, 2014) and before even reading the article that brought me to the site I feel in love with the design. It was so simple it was beautiful. I wanted to recreate the menu so here is my attempt.</p>
</div>
</div>
</div>
<nav class="animate">
<h4>Property Search</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="suburbs">Suburbs to search</label>
<input type="email" class="form-control" id="Suburbs" placeholder="Enter suburbs">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
<span class="fa fa-search-minus nav-controller psuedo-link pull-right" style="padding-right: 80px">Close</span>
</form>
</nav>
body {
font-family: sans-serif;
}
h2 {
text-transform: uppercase;
}
.wb {
display: inline-block;
font-family: "wiseberry-icons" !important;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.animate {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.param {
color: rgba(51,51,51.0.8);
}
.search-params {
background:#f2f2f5;
border-bottom: 1px solid #fff;
}
.psuedo-link {
color: #428bca;
font-size: 1.4em;
text-decoration: underline;
cursor: pointer;
}
.search-controller {
display: inline-block;
color: rgb(51, 51, 51);
position: fixed;
top: 15px;
right: 55px;
width:140px;
z-index: 999;
}
nav ~ .search-controller > .nav-controller > .controller-open {
display: inline-block;
color: rgb(51, 51, 51);
}
nav ~ .search-controller > .nav-controller > .controller-close {
display: none;
}
nav.focus ~ .search-controller > .nav-controller > .controller-open {
display: none;
}
nav.focus ~ .search-controller > .nav-controller > .controller-close {
display: inline-block;
color: rgb(255,255,255);
}
nav {
position: fixed;
top: -300px;
right: 0;
padding-top: 8px;
padding-bottom: 15px;
width: 100%;
max-height: 200px;
text-align: left;
background-color: rgb(130, 36, 51);
color: rgb(255,255,255);
box-shadow: -3px 0px 3px 0px rgba(160, 160, 160, 0.30);
z-index: 100;
overflow: auto;
}
nav.focus {
top: 0px;
}
nav > .divider {
content: '';
border-bottom: 1px solid rgb(230, 230, 230);
max-height: 1px;
overflow: hidden;
margin: 15px 0px;
}
nav > h4,
nav > p,
nav > ul {
padding: 0px 10px;
}
nav > h4 {
font-family: 'Anton', sans-serif;
}
nav > ul {
list-style: none;
}
nav > ul > li {
margin: 5px 0px;
}
nav > ul > li > a {
color: rgb(190, 190, 190);
}
nav > ul > li > a:hover {
font-size: 1.1em;
font-weight: 700;
color: rgb(51, 51, 51);
text-decoration: none;
}
$(function() {
$('.nav-controller').on('click', function(event) {
$('nav').toggleClass('focus');
});
})
