Basic Hamburger Navigation Menu jQuery CSS - Download Basic Hamburger Navigation Menu With jQuery And CSS/CSS3

Download Basic Hamburger Navigation Menu With jQuery And CSS/CSS3

By Posted on

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

Basic Hamburger Navigation Menu jQuery CSS - Download Basic Hamburger Navigation Menu With jQuery And CSS/CSS3
File Size: 5.35 KB
Views Total: 25402
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A simple, lightweight, responsive, jQuery/CSS based Hamburger Navigation system that automatically converts the normal site menu into a toggleable, mobile-friendly dropdown menu on small screens. Powered by CSS3 flexbox model and several animation properties (transition, transform).

How to use it:

1. Create the navigation menu with a hamburger toggle for your website.

view source
01 <nav class="site-nav">
02  
03   <div class="menu-toggle">
04     <div class="hamburger"></div>
05   </div>
06  
07   <ul class="open desktop">
08     <li><a href="#!">Home</a></li>
09     <li><a href="#!">Latest News</a></li>
10     <li><a href="#!">About us</a></li>
11     <li><a href="#!">Download Plugin</a></li>
12     <li><a href="#!">Contact us</a></li>
13      
14   </ul>
15 </nav>

2. The basic CSS styles for the hamburger navigation.

view source
01 nav {
02   margin: 0;
03   padding: 0;
04 }
05  
06 nav ul {
07   display: flex;
08   flex-direction: column;
09   list-style-type: none;
10   padding: 0;
11   margin: 0;
12   display: none;
13 }
14  
15 nav ul.opening {
16   display: block;
17   height: 30px;
18 }
19  
20 nav li { border-bottom: 1px solid #f6f4e2; }
21  
22 nav li:last-child { border-bottom: none; }
23  
24 nav a {
25   color: #EBEBD3;
26   background: #e7a119;
27   display: block;
28   padding: 1.5em 4em 1.5em 3em;
29   text-transform: uppercase;
30   text-decoration: none;
31 }
32  
33 nav a:hover, nav a:focus { background: #E4B363; }
34  
35 .site-nav--icon {
36   font-size: 1.4em;
37   margin-right: 1em;
38   width: 1.1em;
39   text-align: right;
40   color: rgba(255,255,255,.4);
41 }

3. The CSS styles for menu toggle

view source
01 .menu-toggle {
02   position: absolute;
03   padding: 0.8em;
04   top: 1em;
05   right: .5em;
06   cursor: pointer;
07 }
08  
09 .hamburger, .hamburger::before, .hamburger::after {
10   content: '';
11   display: block;
12   background: #EBEBD3;
13   height: 3px;
14   width: 2em;
15   border-radius: 3px;
16   -webkit-transition: all ease-in-out 350ms;
17   transition: all ease-in-out 350ms;
18 }
19  
20 .hamburger::before {
21   -webkit-transform: translateY(-7px);
22   transform: translateY(-7px);
23 }
24  
25 .hamburger::after {
26   -webkit-transform: translateY(4px);
27   transform: translateY(4px);
28 }
29  
30 .open .hamburger {
31   -webkit-transform: rotate(45deg);
32   transform: rotate(45deg);
33 }
34  
35 .open .hamburger::before { display: none; }
36  
37 .open .hamburger::after {
38   -webkit-transform: translateY(-1px) rotate(-90deg);
39   transform: translateY(-1px) rotate(-90deg);
40 }

4. The CSS styles for the hamburger navigation on desktop (screen width > 780px).

view source
01 @media (min-width: 780px) {
02  
03 .menu-toggle { display: none; }
04  
05 nav ul {
source : jqueryscript.net

Related posts: