This time I will share jQuery Plugin and tutorial about Modern Responsive Hamburger Navigation In jQuery, hope it will help you in programming stack.
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.5 s 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.5 s 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.5 s; |
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.5 s; |
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: 500 ms; |
082 |
} |
083 |
084 |
.nav--active .nav__link { |
085 |
opacity: 1 ; |
086 |
} |
087 |
088 |
.nav--active .nav { |
089 |
transition: all
|