<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav class="socialmedia"> <div class="menu"> <ul> <li><a href="#"><i class="fa fa-apple"></i></a></li> <li><a href="#" class="menu-item">HOME</a> </li> <li><a href="#" class="menu-item">ABOUTUS</a> </li> <li><a href="#" class="menu-item">CONTACTUS</a> </li> <li><a href="#" class="menu-item">LOGIN</a> </li> <li><a href="#" class="menu-item">REGISTER</a> </li> <li><a href="#" class="menu-item">BLOG</a> </li> <li><a href="#" class="menu-item">Support</a> </li> <li><a href="#" id="search"><i class="fa fa-search"></i></a> </li> <li><a href="#" ><i class="fa fa-shopping-basket"></i></a> </li> </ul> <div class="search-form"> <form> <input type="text" name="" placeholder="search here "> </form> </div> <a class="close"><i class="fa fa-times "></i></a> </div> </nav>

.socialmedia{ height:61px; background:#000; } .menu{ position:relative; margin: 0 auto; width:1000px; overflow:hidden; } .menu ul{ width: 100%; margin:0; padding-right:0; display:flex; justify-content: space-between; } .menu ul li{ list-style: none; } .menu ul li, .menu ul li a { color: #fff; line-height:61px; text-decoration: none; } .menu ul li .fa .fa-apple{ font-size:20px; } .menu ul li a.menu-item{ transform:scale(1); transition:0.5s; display:block; } .menu ul li a.menu-item.hide-item{ transform:scale(0); } .menu ul li:nth-child(2) a.menu-item.hide-item{ transition-delay: 0.6s; } .menu ul li:nth-child(3) a.menu-item.hide-item{ transition-delay: 0.5s; } .menu ul li:nth-child(4) a.menu-item.hide-item{ transition-delay: 0.4s; } .menu ul li:nth-child(5) a.menu-item.hide-item{ transition-delay: 0.3s; } .menu ul li:nth-child(6) a.menu-item.hide-item{ transition-delay: 0.2s; } .menu ul li:nth-child(7) a.menu-item.hide-item{ transition-delay: 0.1s; } .menu ul li:nth-child(8) a.menu-item.hide-item{ transition-delay: 0s; } .menu ul li:nth-child(2) a.menu-item{ transition-delay: 0s; } .menu ul li:nth-child(3) a.menu-item{ transition-delay: 0.1s; } .menu ul li:nth-child(4) a.menu-item{ transition-delay: 0.2s; } .menu ul li:nth-child(5) a.menu-item{ transition-delay: 0.3s; } .menu ul li:nth-child(6) a.menu-item{ transition-delay: 0.4s; } .menu ul li:nth-child(7) a.menu-item{ transition-delay: 0.5s; } .menu ul li:nth-child(8) a.menu-item{ transition-delay: 0.6s; } .search-form{ position:absolute; top:0; left:50%; transform: translateX(0); width: 600px; height: 61px; opacity:0; visibility:hidden; transition:0.5s; } .search-form input{ width:100%; height: 61px; background: transparent; color:#fff; border:none; font-size:16px; } .search-form: before{ content: '\f002'; position: absolute; top:12px; left:-26px; font-size: 18px; color: #fff; font-family: fontAwesome; } .search-form input::placholder{ color: #fff; } .search-form.active{ opacity: 1; visibility: visible; transition-delay:0.5s; transform: translateX(-50%); } .close{ position: absolute; right:0; top: 0; height: 61px; background: #000; color: #fff; line-height: 61px; font-size: 18px; text-align: right; width: 20px; cursor: pointer; opacity:1; visibility: hidden; } .close.active{ opacity: 1; visibility: visible; } i.fa.fa-times { color: white; }

$(document).ready(function(){ $('#search').click(function(){ $('.menu-item').addClass('hide-item') $('.search-form').addClass('active') $('.close').addClass('active') }) }) $('.close').click(function(){ $('.menu-item').removeClass('hide-item') $('.search-form').removeClass('active') $('.close').removeClass('active') })