"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
<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 ---------->
<div class="allMenu">
<ul class="ul">
<li class="lia"><a href="" class="li">Home</a></li>
<li class="lia"><a href="" class="li">Info</a></li>
<li class="lia"><a href="" class="li">Portfolio</a></li>
<li class="lia"><a href="" class="li">The Team</a></li>
</ul>
<div class="Menu2">
<svg version="1.1" id="menulogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="36px" viewBox="0 0 40 36" enable-background="new 0 0 40 40" xml:space="preserve">
<rect class="rect1" fill="#FFF" width="40" height="5.392"/>
<rect class="rect2" x="0" y="12" fill="#FFF" width="40" height="5.393" />
<rect class="rect3" x="0" y="24" fill="#FFF" width="40" height="5.393"/>
</svg>
<div class="Menu">
</div>
</div>
<div style="align:right">
<img class="logo_image" src="n.com/dms/image/C510BAQElsrY09SEy8A/company-logo_200_200/0?e=2159024400&v=beta&t=pWFygjeVpPRmHvLMENQZ2nyPyhC02JAwwb3op41fJr8">
</div>
</div>
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
body{
background:#7f7f7f;
transition: all 4s;
overflow-x:hidden;
margin: 0 0 0 0;
}
.hover{
transform:scale(50,50);
}
.rect1, .rect2, .rect3{
-webkit-transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
-moz-transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
-o-transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995); /* custom */
}
.Menu{
background:#dc403b;
width:200px;
-webkit-transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
-moz-transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
-o-transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
transition: all 800ms cubic-bezier(0.980, 0.005, 0.000, 0.995); /* custom */
height:200px;
border-radius:50%;
z-index:99;
float:right;
margin-right:-155px;
margin-top:-100px;
}
.Menu2{
width:100%;
height:100px;
overflow:hidden;
position:absolute;
}
#menulogo{
margin-right:25px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function() {
var $Menu = $('.Menu');
$('#menulogo').click(function() {
if($Menu.hasClass('hover')){
$Menu.removeClass('hover');
$('.rect1').css('opacity','1');
$('.rect2').css('transform','rotate(0deg) translate(0px, 0px)');
$('.rect3').css('transform','rotate(0deg) translate(0px, 0px)');
$('#menulogo').css('margin-top','25px');
$('.ul').css('margin-top','-100px');
}else{
$Menu.addClass('hover');
$('.rect1').css('opacity','0');
$('.rect2').css('transform','rotate(45deg) translate(6px, -15px)');
$('.rect3').css('transform','rotate(-45deg) translate(-20px, 0px)');
$('.ul').css('margin-top','0px');
$('#menulogo').css('margin-top','35px');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System

Questions / Comments: