modern responsive hamburger navigation - Download Modern Responsive Hamburger Navigation In jQuery

Download Modern Responsive Hamburger Navigation In jQuery

Posted on

This time I will share jQuery Plugin and tutorial about Modern Responsive Hamburger Navigation In jQuery, hope it will help you in programming stack.

modern responsive hamburger navigation - Download Modern Responsive Hamburger Navigation In jQuery
File Size: 7.57 KB
Views Total: 3224
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A modern responsive navigation concept that automatically collapses the horizontal header menu into a hamburger navigation on small screen devices.

Click/tap the hamburger button you will see an off-canvas menu sliding from the left of the screen and covering the whole page.

How to use it:

1. Code the HTML for the header navigation.

01 <header class="navigation">
02   <a href="#" class="nav__trigger"><span class="nav__icon"></span></a>
03   <nav class="nav">
04     <ul class="nav__list">
05       <li class="nav__item"><span class="company-name">Company Name</span></li>
06       <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
07       <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
08       <li class="nav__item"><a class="nav__link" href="#">About</a></li>
09       <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
10     </ul>
11   </nav>
12 </header>

2. The necessary CSS styles for the navigation.

001 body.no-scroll {
002   overflow: hidden;
003 }
004  
005 .nav {
006   position: fixed;
007   width: 100%;
008   height: auto;
009   z-index: 5;
010   transition: all 0.5s ease-in-out;
011   font-weight: 400;
012   background-color: #292f36;
013 }
014  
015 .nav__list {
016   display: flex;
017   align-items: baseline;
018   text-transform: uppercase;
019   justify-content: space-around;
020   flex-direction: row;
021   padding: 1em 0.5em;
022 }
023  
024 .nav__item {
025   list-style-type: none;
026 }
027  
028 .nav__link {
029   font-size: 1.5em;
030   text-decoration: none;
031   color: #f7faff;
032   opacity: 1;
033   transition: opacity 0.5s ease-in-out;
034 }
035  
036 .nav__link:hover {
037   color: #f7faff;
038 }
039  
040 /* hamburger trigger */
041 .nav__trigger {
042   display: none;
043   position: fixed;
044   width: 30px;
045   height: 25px;
046   right: 100px;
047   top: 50px;
048   z-index: 200;
049 }
050  
051 .nav__icon {
052   display: inline-block;
053   position: relative;
054   width: 40px;
055   height: 5px;
056   background-color: #f7faff;
057   transition-property: background-color, transform;
058   transition-duration: 0.5s;
059 }
060  
061 .nav__icon:before, .nav__icon:after {
062   content: '';
063   display: block;
064   width: 40px;
065   height: 5px;
066   position: absolute;
067   background: #f7faff;
068   transition-property: margin, transform;
069   transition-duration: 0.5s;
070 }
071  
072 .nav__icon:before {
073   margin-top: -10px;
074 }
075  
076 .nav__icon:after {
077   margin-top: 10px;
078 }
079  
080 .nav__link {
081   transition-delay: 500ms;
082 }
083  
084 .nav--active .nav__link {
085   opacity: 1;
086 }
087  
088 .nav--active .nav {