我正在寻找一种方法，让搜索栏在点击时移动到顶部，移动到汉堡旁边，就像Google的搜索栏响应一样，并且当发生这种情况时，屏幕上没有显示lan。请帮忙。
我的HTML代码：
body{
font-family: 'Montserrat', sans-serif;
font-size: 15px;
}
p, input, textarea{
font-family: 'Lora', serif;
}
/****************
SECTION
*****************/
a{
color: #fa694e;
}
/*************
this controls the nav bar
*************/
.menu-toggle{
position: absolute;
left: 15px;
top: 15px;
font-size: 30px;
color: #fff;
}
.menu{
width: 300px;
display: block;
background: #333;/* controls the color of the nav bar*/
height: 100%;
top: 0;
left:-300px;
position: fixed;
z-index: 100;
text-align: center;
transition: left 0.4s;
}
.menu.nav-expanded{
left: 0;
}
.menu .close{
color: #fff;
margin-right: 10px;
margin-top:10px;
}
.menu h3{
margin-top:50px;
margin-bottom: 20px;
text-transform: uppercase;
}
.menu .nav{
padding: 0;
}
.menu .nav > li > a{
color: #fff;
}
.menu .nav > li > a:hover,
.menu .nav > li > a:focus{
background: transparent;
color: #0EBFE9;
}
/***
navbar ending
***/
.jumbotron{
text-align: center;
position: fixed;
height: 100%;
width: 100%;
background-size: cover;
color: #fff;
min-height: 400px;
}
.jumbotron .mask{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.5;
}
.jumbotron p{
color: #fff;
font-size: 20px
}
.jumbotron .container{
margin-top: 10%;
}
.jumbotron h1{
text-transform: uppercase;
}
.header-info{
position: relative;
}
.log {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: border-color 0.4s, color 0.4s;
transition: border-color 0.4s, color 0.4s;
width: 100px;
}
.button{
background: #0EBFE9;
border-width: 2px;
color: #fff;
border-color: #0EBFE9;
}
.one{
padding: 10px 41px;
}
.two{
padding: 10px 34px;
}
.three{
padding: 10px 41px;
}
.menu h5 {
padding-bottom: 15px
}
.btn{
position: absolute;
right: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 8px 22px;
border-radius: 0;
-webkit-transition: border-color 0.4s, color 0.4s;
transition: border-color 0.4s, color 0.4s;
}
.btn-primary{
background: #0EBFE9;
border-width: 2px;
color: #fff;
border-color: #0EBFE9;
}
.btn-primary:focus{
background: ##0EBFE9;
color: #fff;
border-color: #0EBFE9;
}
@media screen and (min-width: 768px){
.jumbotron h1,
.jumbotron .h1 {
font-size: 60px;
}
h4{
color: black;
font-size: 20px;
}
}
/***************************************
search bar
***************************************/
input{
border: none;
padding: 10px;
margin: 10px;
height: 40px;
width: 60%;
min-width: 300px;
border:1px solid #eaeaea;
outline:none;
color: black;
}
input:hover{
border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9;
}
input:focus{
border-color:#4d90fe;
}
.fa-map-marker {
color: green;
}
.fa-bars {
color: green;
}
.lan{
color: green;
}
.words {
color: #333
}
/*footer*/
footer{
position: absolute;
padding: 0;
bottom: 0pt;
text-align: left;
}
footer > ul > li {
display: inline-block;
padding-right: 10px;
}
h4{
color: black;
font-size: 13px;
}
footer > ul > li > h4 > a {
color: black;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lan</title>
<!-- Load fonts -->
<link href='http://fonts.googleapis.com/css?family=Montserrat'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet'
type='text/css'>
<!-- Load css styles -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="jumbotron home home-fullscreen" id="home">
<div class="mask"></div>
<a href="" class="menu-toggle" id="nav-expander"><i class="fa fa-bars"></i>
</a>
<!-- Offsite navigation -->
<nav class="menu">
<a href="#" class="close"><i class="fa fa-close"></i></a>
<h5><a data-scroll href="login.html" class="log button one">log in</a></h5>
<h5><a data-scroll href="signup.html" class="log button two">sign up</a>
</h5>
<ul class="nav">
</ul>
</nav>
<!-- add searches -->
<a href="#" class="btn btn-primary">add searches</a>
<!-- ending -->
<div class="container">
<div class="header-info">
<h1><span class="space">lan</span><i class="fa fa-map-marker" aria-
hidden="true"></i></h1>
<p><span class= "words">finding stuffs
</span></p>
<!-- making a search bar -->
<div class="form-group">
<input type="text" id="search" placeholder="lan searches?" />
</div>
</div>
</div>
<!-- Footer start -->
<footer class="foot">
<ul>
<li><h4>© lankey</h4></li>
<li> <h4> <a href=""> About </a> </h4> </li>
<li> <h4> <a href=""> Contact </a> </h4> </li>
<li> <h4> <a href=""> Help </a> </h4> </li>
</ul>
</footer>
<!-- Footer end -->
</div>
<!-- Contact section start -->
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<!-- Load Booststrap -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
sensor=false"></script>
<!-- Load custom js for theme -->
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>