morphing hamburger navigation - Download Morphing Hamburger Navigation With jQuery And CSS3

Download Morphing Hamburger Navigation With jQuery And CSS3

Posted on

This time I will share jQuery Plugin and tutorial about Morphing Hamburger Navigation With jQuery And CSS3, hope it will help you in programming stack.

morphing hamburger navigation - Download Morphing Hamburger Navigation With jQuery And CSS3
File Size: 5.92 KB
Views Total: 2853
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An awesome hamburger navigation concept that morphs the hamburger toggle button into a fullscreen overlay using JavaScript (jQuery) and CSS animations.

How to use it:

1. Insert the hamburger toggle button into the header navigation.

01 <header class="cd-header">
02   <div class="header-wrapper">
03     <div class="logo-wrap">
04       <a href="#"><span>your</span>logo</a>
05     </div>
06     <div class="nav-but-wrap">
07       <div class="menu-icon hover-target">
08         <span class="menu-icon__line menu-icon__line-left"></span>
09         <span class="menu-icon__line"></span>
10         <span class="menu-icon__line menu-icon__line-right"></span>
11       </div>         
12     </div>         
13   </div>       
14 </header>

2. The CSS/CSS3 rules for the header navigation & hamburger toggle button.

01 .cd-header{
02   position: fixed;
03   width:100%;
04   top:0;
05   left:0;
06   z-index:100;
07 }
08  
09 .header-wrapper{
10   position: relative;
11   width: calc(100% - 100px);
12   margin-left: 50px;
13 }
14  
15 .logo-wrap {
16   position: absolute;
17   display:block;
18   left:0;
19   top: 40px;
20   cursor: pointer;
21 }
22  
23 .logo-wrap a {
24   cursor: pointer;
25   font-family: 'Montserrat', sans-serif;
26   font-weight: 900;
27   font-size: 20px;
28   line-height: 20px;
29   text-transform: uppercase;
30   letter-spacing: 2px;
31   color: #fff;
32   transition : all 0.3s ease-out;
33 }
34  
35 .logo-wrap a span{
36   color: #8167a9;
37 }
38  
39 .logo-wrap a:hover {
40   opacity: 0.9;
41 }
42  
43 .nav-but-wrap{
44   position: relative;
45   display: inline-block;
46   float: right;
47   padding-left: 15px;
48   padding-top: 15px;
49   margin-top: 26px;
50   transition : all 0.3s ease-out;
51 }
52  
53 .menu-icon {
54   height: 30px;
55   width: 30px;
56   position: relative;
57   z-index: 2;
58   cursor: pointer;
59   display: block;
60 }
61  
62 .menu-icon__line {
63   height: 2px;
64   width: 30px;
65   display: block;
66   background-color: #fff;
67   margin-bottom: 7px;
68   cursor: pointer;
69   -webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
70   transition: background-color .5s ease, -webkit-transform .2s ease;
71   transition: transform .2s ease, background-color .5s ease;
72   transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
73 }
74  
75 .menu-icon__line-left {
76   width: 16.5px;
77   -webkit-transition: all 200ms linear;
78   transition: all 200ms linear;
79 }
80  
81 .menu-icon__line-right {
82   width: 16.5px;
83   float: right;
84   -webkit-transition: all 200ms linear;
85   -moz-transition: all 200ms linear;