<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
<nav class="main-menu">
<ul class="main-menu__list">
<li class="main-menu__item"><a href="#">Approach</a></li>
<li class="main-menu__item"><a href="#">Solutions</a>
<ul class="sub-menu">
<li class="sub-menu__item"><a href="#">Railway</a></li>
<li class="sub-menu__item"><a href="#">Industrial</a></li>
</ul>
</li>
<li class="main-menu__item"><a href="#">Products</a></li>
<li class="main-menu__item"><a href="#">Company</a>
<ul class="sub-menu">
<li class="sub-menu__item"><a href="#">About us</a></li>
<li class="sub-menu__item"><a href="#">Values</a></li>
<li class="sub-menu__item"><a href="#">Team</a></li>
<li class="sub-menu__item"><a href="#">Career</a></li>
</ul>
</li>
<li class="main-menu__item"><a href="#">Resources</a>
<ul class="sub-menu">
<li class="sub-menu__item"><a href="#">Press</a></li>
<li class="sub-menu__item"><a href="#">Case studies</a></li>
<li class="sub-menu__item"><a href="#">Blog</a></li>
</ul>
</li>
<li class="main-menu__item"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<a href="#mmenu" id="hamburger" class="hamburglar is-closed">
<div class="burger-icon">
<div class="burger-container">
<span class="burger-bun-top"></span>
<span class="burger-filling"></span>
<span class="burger-bun-bot"></span>
</div>
</div>
<!-- svg ring containter -->
<div class="burger-ring">
<svg class="svg-ring">
<path class="path" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
</svg>
</div>
<!-- the masked path that animates the fill to the ring -->
<svg width="0" height="0">
<mask id="mask">
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" />
</mask>
</svg>
<div class="path-burger">
<div class="animate-path">
<div class="path-rotation"></div>
</div>
</div>
</a>
</body>
body {
width: 100%;
height: 100%;
min-height: 100vh;
background-image: radial-gradient(farthest-corner at 45px 45px, #08c 0%, #00f7e1 100%);
}
.container {
max-width: 780px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
align-items: flex-start;
position: relative;
}
.main-menu {
text-align: left;
display: block;
width: 100%;
}
.main-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
}
.main-menu ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
.main-menu ul li a {
text-decoration: none;
outline: none;
color: #fff;
opacity: 0.7;
transition: all 250ms ease;
font-family: sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu > ul > li:hover > a {
opacity: 1;
}
.main-menu > ul > li:hover .sub-menu {
opacity: 1;
visibility: visible;
}
.main-menu > ul > li > a {
padding: 0 30px;
line-height: 70px;
}
.main-menu .main-menu__list {
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.main-menu .sub-menu {
width: 100%;
position: absolute;
top: 100%;
margin: 0;
display: block;
visibility: hidden;
opacity: 0;
transition: top 0.25s ease-in-out;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 8px rgba(23, 72, 119, 0.15);
min-width: 155px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
transition-delay: 0;
height: inherit;
}
.main-menu .sub-menu li {
border-bottom-width: 1px;
border-bottom-color: #3d3d3d;
display: block;
padding: 0 15px;
position: relative;
float: none;
height: auto;
background: 0;
box-shadow: inset 0 -1px 0 0 rgba(177, 214, 225, 0.2);
}
.main-menu .sub-menu li a {
display: block;
font-weight: 500;
height: auto;
line-height: 20px;
margin: 0;
padding: 6px 0;
transition: color 0.25s ease-in-out;
font-size: 11px;
letter-spacing: 1px;
opacity: 0.7;
text-decoration: none;
font-size: 14px;
color: #08c;
}
.main-menu .sub-menu li:hover a {
opacity: 1;
}
.hamburglar {
-webkit-transform: scale(0.8);
transform: scale(0.8);
position: absotute;
display: none;
width: 68px;
height: 68px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 100;
right: 50px;
top: 50px;
}
.path-burger {
position: absolute;
top: 0;
left: 0;
height: 68px;
width: 68px;
-webkit-mask: url(#mask);
mask: url(#mask);
-webkit-mask-box-image: url(https://raygun.io/upload/mask.svg);
}
.animate-path {
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 68px;
}
.path-rotation {
height: 34px;
width: 34px;
margin: 34px 34px 0 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.path-rotation:before {
content: "";
display: block;
width: 30px;
height: 34px;
margin: 0 4px 0 0;
background: white;
}
@-webkit-keyframes rotate-out {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-out {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate-in {
0% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
40% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes rotate-in {
0% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
40% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.hamburglar.is-open .path {
-webkit-animation: dash-in 0.6s linear normal;
animation: dash-in 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hamburglar.is-open .animate-path {
-webkit-animation: rotate-in 0.6s linear normal;
animation: rotate-in 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hamburglar.is-closed .path {
-webkit-animation: dash-out 0.6s linear normal;
animation: dash-out 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hamburglar.is-closed .animate-path {
-webkit-animation: rotate-out 0.6s linear normal;
animation: rotate-out 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.path {
stroke-dasharray: 240;
stroke-dashoffset: 240;
stroke-linejoin: round;
}
@-webkit-keyframes dash-in {
0% {
stroke-dashoffset: 240;
}
40% {
stroke-dashoffset: 240;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash-in {
0% {
stroke-dashoffset: 240;
}
40% {
stroke-dashoffset: 240;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash-out {
0% {
stroke-dashoffset: 0;
}
40% {
stroke-dashoffset: 240;
}
100% {
stroke-dashoffset: 240;
}
}
@keyframes dash-out {
0% {
stroke-dashoffset: 0;
}
40% {
stroke-dashoffset: 240;
}
100% {
stroke-dashoffset: 240;
}
}
.burger-icon {
position: absolute;
padding: 20px 16px;
height: 68px;
width: 68px;
}
.burger-container {
position: relative;
height: 28px;
width: 36px;
}
.burger-bun-top,
.burger-bun-bot,
.burger-filling {
position: absolute;
display: block;
height: 4px;
width: 36px;
border-radius: 2px;
background: #fff;
}
.burger-bun-top {
top: 0;
-webkit-transform-origin: 34px 2px;
transform-origin: 34px 2px;
}
.burger-bun-bot {
bottom: 0;
-webkit-transform-origin: 34px 2px;
transform-origin: 34px 2px;
}
.burger-filling {
top: 12px;
}
.burger-ring {
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 68px;
}
.svg-ring {
width: 68px;
height: 68px;
}
.hamburglar.is-open .burger-bun-top {
-webkit-animation: bun-top-out 0.6s linear normal;
animation: bun-top-out 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hamburglar.is-open .burger-bun-bot {
-webkit-animation: bun-bot-out 0.6s linear normal;
animation: bun-bot-out 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hamburglar.is-closed .burger-bun-top {
-webkit-animation: bun-top-in 0.6s linear normal;
animation: bun-top-in 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hamburglar.is-closed .burger-bun-bot {
-webkit-animation: bun-bot-in 0.6s linear normal;
animation: bun-bot-in 0.6s linear normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes bun-top-out {
0% {
left: 0;
top: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
left: 0;
top: 0;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
80% {
left: -5px;
top: 0;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
100% {
left: -5px;
top: 1px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@keyframes bun-top-out {
0% {
left: 0;
top: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
left: 0;
top: 0;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
80% {
left: -5px;
top: 0;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
100% {
left: -5px;
top: 1px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-webkit-keyframes bun-bot-out {
0% {
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
left: 0;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
80% {
left: -5px;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
100% {
left: -5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@keyframes bun-bot-out {
0% {
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
left: 0;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
80% {
left: -5px;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
100% {
left: -5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@-webkit-keyframes bun-top-in {
0% {
left: -5px;
bot: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
20% {
left: -5px;
bot: 0;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
80% {
left: 0;
bot: 0;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
left: 0;
bot: 1px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes bun-top-in {
0% {
left: -5px;
bot: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
20% {
left: -5px;
bot: 0;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
80% {
left: 0;
bot: 0;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
left: 0;
bot: 1px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes bun-bot-in {
0% {
left: -5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
20% {
left: -5px;
bot: 0;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
80% {
left: 0;
bot: 0;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
100% {
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes bun-bot-in {
0% {
left: -5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
20% {
left: -5px;
bot: 0;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
80% {
left: 0;
bot: 0;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
100% {
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.hamburglar.is-open .burger-filling {
-webkit-animation: burger-fill-out 0.6s linear normal;
animation: burger-fill-out 0.6s linear normal;
opacity: 0;
}
.hamburglar.is-closed .burger-filling {
-webkit-animation: burger-fill-in 0.6s linear normal;
animation: burger-fill-in 0.6s linear normal;
}
@-webkit-keyframes burger-fill-in {
0% {
width: 0;
left: 36px;
}
40% {
width: 0;
left: 40px;
}
80% {
width: 36px;
left: -6px;
}
100% {
width: 36px;
left: 0px;
}
}
@keyframes burger-fill-in {
0% {
width: 0;
left: 36px;
}
40% {
width: 0;
left: 40px;
}
80% {
width: 36px;
left: -6px;
}
100% {
width: 36px;
left: 0px;
}
}
@-webkit-keyframes burger-fill-out {
0% {
width: 36px;
left: 0px;
}
20% {
width: 42px;
left: -6px;
}
40% {
width: 0;
left: 40px;
}
100% {
width: 0;
left: 36px;
}
}
@keyframes burger-fill-out {
0% {
width: 36px;
left: 0px;
}
20% {
width: 42px;
left: -6px;
}
40% {
width: 0;
left: 40px;
}
100% {
width: 0;
left: 36px;
}
}
.mm-panels > .mm-panel {
box-shadow: 0 15px 0 rgba(23, 72, 119, 0.15);
}
.mm-panels > .mm-panel.mm-hasnavbar {
padding-top: 60px;
}
.mm-navbar {
height: 60px;
}
.mm-navbar > * {
padding: 0;
}
.mm-btn {
width: 60px;
height: 60px;
}
.mm-navbar .mm-title {
color: #08c !important;
text-transform: uppercase;
line-height: 60px;
font-size: 19px;
font-family: sans-serif;
}
.mm-listview > li > a,
.mm-listview > li > span {
line-height: 23px;
color: #424242;
font-size: 17px;
padding: 20px 10px 20px 40px;
font-family: sans-serif;
}
.mm-listview > li,
.mm-listview > li .mm-next,
.mm-listview > li:after,
.mm-navbar {
border-color: rgba(0, 116, 176, 0.07);
}
.mm-menu.mm-theme-white .mm-btn:before,
.mm-menu.mm-theme-white .mm-listview > li .mm-next:after {
border-color: #08c;
}
.mm-listview > li .mm-next {
border: none;
border-color: transparent;
}
.main-header.sticky .main_menu > ul > li > a,
.mm-navbar-bottom a {
line-height: 60px;
}
.drop_down .sub-menu li a span,
.mm-navbar-bottom a,
.mm-navbar-bottom a {
color: #08c;
}
@media all and (max-width: 992px) {
.hamburglar {
display: block;
position: absolute;
}
.main-menu {
display: none;
}
}
$("document").ready(function() {
$("#mmenu").mmenu({
extensions: ["pagedim-black", "fx-menu-slide"],
navbar: {
title: "Site name"
},
offCanvas: {
position: "left"
},
navbars: [
{
position: "bottom",
content: ["<a href='#'>Some link</a>"]
}
]
});
var trigger = $("#hamburger"),
isClosed = true;
var api = $("#mmenu").data("mmenu");
api.bind("closed", function() {
trigger.removeClass("is-open");
trigger.addClass("is-closed");
isClosed = false;
});
trigger.click(function() {
burgerTime();
});
function burgerTime() {
if (isClosed == true) {
trigger.removeClass("is-open");
trigger.addClass("is-closed");
isClosed = false;
} else {
trigger.removeClass("is-closed");
trigger.addClass("is-open");
isClosed = true;
}
}
$("body").click(function(event) {
console.log(event.target);
});
});
