"Untitled"
Bootstrap 4.1.1 Snippet by saikrishna99666

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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')
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO

Questions / Comments: