<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="…">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="https://imgur.com/download/GcHTJg2">
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<form action="#" autocomplete="off">
<fieldset class="url">
<input id="url" type="text" name="url" required>
<label for="url"><i class="fa fa-search" aria-hidden="true"></i> Search</label>
<div class="after"></div>
</fieldset>
<fieldset class="enter">
<button></button>
</fieldset>
</form>
</body>
</html>
*{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Initial menu */
.menu {
background-color: #98e1eb;
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMTJkYWY0IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwM2M1ZGIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjIyMSIvPjxzdG9wIHN0b3AtY29sb3I9IiNlZmVmZWYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjQwOCIvPjxzdG9wIHN0b3AtY29sb3I9IiNlZmVmZWYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjU0NCIvPjxzdG9wIHN0b3AtY29sb3I9IiNjM2U2ZWQiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjc5NTk5OTk5OTk5OTk5OTkiLz48c3RvcCBzdG9wLWNvbG9yPSIjYzNlNmVkIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN2c2dnKSIgLz48L3N2Zz4=);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(18, 218, 244)),color-stop(0.221, rgb(3, 197, 219)),color-stop(0.408, rgb(239, 239, 239)),color-stop(0.544, rgb(239, 239, 239)),color-stop(0.796, rgb(195, 230, 237)),color-stop(1, rgb(195, 230, 237)));
/* Android 2.3 */
background-image: -webkit-repeating-linear-gradient(top,rgb(18, 218, 244) 0%,rgb(3, 197, 219) 22.1%,rgb(239, 239, 239) 40.8%,rgb(239, 239, 239) 54.4%,rgb(195, 230, 237) 79.6%,rgb(195, 230, 237) 100%);
/* IE10+ */
background-image: repeating-linear-gradient(to bottom,rgb(18, 218, 244) 0%,rgb(3, 197, 219) 22.1%,rgb(239, 239, 239) 40.8%,rgb(239, 239, 239) 54.4%,rgb(195, 230, 237) 79.6%,rgb(195, 230, 237) 100%);
background-image: -ms-repeating-linear-gradient(top,rgb(18, 218, 244) 0%,rgb(3, 197, 219) 22.1%,rgb(239, 239, 239) 40.8%,rgb(239, 239, 239) 54.4%,rgb(195, 230, 237) 79.6%,rgb(195, 230, 237) 100%);
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
/*font-family: 'Open Sans', sans-serif;*/
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li a {
color: RGBA(20, 73, 87, 1);
font-size: 18px;
letter-spacing: 15px;
text-shadow: -2px 2px 10px #558ABB;
text-transform: uppercase;
}
.menu li a:hover {
text-decoration: none;
}
.icon-close {
cursor: pointer;
background-color: RGBA(55, 73, 87, 0.5);
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: RGBA(55, 73, 87, 0.8);
cursor: pointer;
/*font-family: 'Open Sans', sans-serif;*/
font-size: 24px;
line-height: 24px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
body {
position: relative;
left: 0;
margin: 0;
overflow: hidden;
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 700px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;*/
}
.jumbotron{
background:#fff url('https://imgur.com/download/yqdtMRi') no-repeat center;
background-size: cover;
min-height: 100vh;
width: 100%;
padding: 1rem 1rem !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: absolute;
top: 50px;
width: 100%;
padding-top: 50px;
}
fieldset {
position: relative;
}
.fa-search{
position: relative;
top: 0px;
font-size: 20px !important;
}
.url{
margin: 20px 50px;
padding-left: 50px;
-webkit-box-flex: 5;
-ms-flex-positive: 5;
flex-grow: 5;
}
.enter{
margin: 20px 20px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
label {
position: absolute;
top: -5px;
letter-spacing: 10px;
font-size: 20px;
color: RGBA(55, 73, 87, 0.8);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
input:focus ~ label {
color: RGBA(254, 253, 255, 1.00);
}
input:focus ~ label,
input:valid ~ label {
top: 0;
letter-spacing: 5px;
-webkit-transform: translate(0, -30px) scale(0.7, 0.7);
-ms-transform: translate(0, -30px) scale(0.7, 0.7);
transform: translate(0, -30px) scale(0.7, 0.7);
}
input {
font-family: system-ui, Helvetica, Arial, sans-serif;
font-size: 20px !important;
width: 100%;
border: none;
margin-top: 0;
background-color: transparent;
}
input:focus {
outline: none;
}
.after {
width: 100%;
height: 2px;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, RGBA(254, 253, 255, 1.00)), color-stop(50%, transparent));
background: -webkit-linear-gradient(left, RGBA(254, 253, 255, 1.00) 50%, transparent 50%);
background: -o-linear-gradient(left, RGBA(254, 253, 255, 1.00) 50%, transparent 50%);
background: linear-gradient(to right, RGBA(254, 253, 255, 1.00) 50%, transparent 50%);
background-color: RGBA(55, 73, 87, 0.8);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
input:focus ~ .after {
background-position: 0 0;
}
button {
position: relative;
width: 200px;
height: 34px;
font-size: 20px;
font-family: system-ui, Helvetica, Arial, sans-serif;
line-height: 1.5;
margin-top: 20px;
padding: 2px 10px;
color: rgba(255, 255, 255, 0.6);
background: white;
border: none;
border-radius: 15px;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, white), color-stop(50%, transparent));
background: -webkit-linear-gradient(left, white 50%, transparent 50%);
background: -o-linear-gradient(left, white 50%, transparent 50%);
background: linear-gradient(to right, white 50%, transparent 50%);
background-color: RGBA(55, 73, 87, 0.8);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
button:before {
position: absolute;
font-family: system-ui, FontAwesome, Helvetica, Arial, sans-serif;;
font-size: 20px;
content: "\f00c";
letter-spacing: 3px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
display: block;
border-radius: 15px;
/*color: white;*/
background-color: rgba(0, 0, 0, 0.3);
}
button:active,
button:focus,
button:hover {
outline: none;
background-position: 0 0;
color: white;
}
@media (min-width: 1260px){
.body{
background-size: 100%;
}
}
@media (max-width: 590px){
button{
width: 150px;
margin-left: -20px !important;
}
label{
letter-spacing: 7px;
}
}
@media (max-width: 475px){
form{
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
button{
float: right;
margin-right: 25px !important;
}
}
@media (max-width: 315px){
label{
letter-spacing: 5px;
}
}
@media (max-width: 300px){
label{
font-size: 10px;
letter-spacing: 3px;
}
}
var main = function() {
/* Push the body and the nav over by 285px over */
var isOpened = false;
$('.menu').on("mouseover", function() {
clearInterval(walk_through);
});
$('.icon-menu').on("mouseover", function() {
clearInterval(walk_through);
});
$('.icon-menu').click(function() {
isOpened = true;
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').on("mouseover", function() {
clearInterval(walk_through);
});
$('.icon-close').click(function() {
isOpened = false;
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
// Walkthrough the menu
var walk_through = setInterval(function() {
if (!isOpened){
$('.icon-menu').trigger('click');
}
else if (isOpened){
$('.icon-close').trigger('click');
}
}, 3000);
};
$(document).ready(main);
This Pen doesn't use any external CSS resources.