<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>
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;
position:relative;
z-index:999;
float:right;
-webkit-transition: all 500ms cubic-bezier(0.000, 1, 0.985, 0.990); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.000, 1.650, 0.985, 0.990);
-moz-transition: all 500ms cubic-bezier(0.000, 1.650, 0.985, 0.990);
-o-transition: all 500ms cubic-bezier(0.000, 1.650, 0.985, 0.990);
transition: all 500ms cubic-bezier(0.000, 1.650, 0.985, 0.990); /* custom */
margin-top:25px;
}
#menulogo:hover{
-webkit-transform:scale(1.1,1.1);
}
#menulogo:hover{
cursor:pointer;
}
#home{
height:100vh;
margin-top:-65px;
width:100%; background:url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?fit=crop&fm=jpg&h=1000&q=80&w=1925);
background-position:center;
background-size:cover;
font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
text-transform:uppercase;
background-attachment:fixed;
}
.allMenu{
width:100%;
height:100px;
position:relative;
}
ul.ul{
position:absolute;
z-index:9999;
margin-top:-100px;
-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 */
margin-left:auto;
margin-right:auto;
margin-right:200px;
width:80%;
}
li.lia {
display: inline-block;
float: right;
-webkit-transition: all 400ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
-moz-transition: all 400ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
-o-transition: all 400ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
transition: all 400ms cubic-bezier(0.980, 0.005, 0.000, 0.995);
margin-left: -4px;
padding-left: 80px;
padding-right: 80px;
height: 100px;
line-height: 100px;
}
a.li {
font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
font-weight: 700;
}
ul li a:hover{
cursor:pointer;
}
.post-bar .li {
display: inline-block;
font-size: 15px;
color: #676767;
margin-right: 5px;
}
.manin_content{
padding-top: 50px;
}
.servicescount{
padding-top: 5px;
text-align: center;
}
.logo_image{
width:85px;
}
$(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');
}
});
});
