This time I will share jQuery Plugin and tutorial about Basic Responsive Header Dropdown Menu With jQuery And CSS3, hope it will help you in programming stack.
File Size: | 3.32 KB |
---|---|
Views Total: | 2774 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A responsive dropdown menu for header navigation that utilizes CSS3 media queries to detect the screen size and collapses horizontal menu items into a fullscreen sliding toggle menu when the maximum screen width is reached.
How to use it:
1. Create a multi-level header navigation from a nested nav list as follows:
01 |
< header > |
02 |
< div class = "logo" >YOUR LOGO HERE</ div > |
03 |
< nav > |
04 |
< ul > |
05 |
< li >< a href = "#" >Home</ a ></ li > |
06 |
< li >< a href = "#" >About</ a ></ li > |
07 |
< li class = "sub-menu" >< a href = "#" >Services</ a > |
08 |
< ul > |
09 |
< li >< a href = "#" >Link 1</ a ></ li > |
10 |
< li >< a href = "#" >Link 2</ a ></ li > |
11 |
< li >< a href = "#" >Link 3</ a ></ li > |
12 |
< li >< a href = "#" >Link 4</ a ></ li > |
13 |
</ ul > |
14 |
</ li > |
15 |
< li >< a href = "#" >Team</ a ></ li > |
16 |
< li class = "sub-menu" >< a href = "#" >< a href = "https://www.jqueryscript.net/tags.php?/Portfolio/" >Portfolio</ a ></ a > |
17 |
< ul > |
18 |
< li >< a href = "#" >Link 1</ a ></ li > |
19 |
< li >< a href = "#" >Link 2</ a ></ li > |
20 |
< li >< a href = "#" >Link 3</ a ></ li > |
21 |
< li >< a href = "#" >Link 4</ a ></ li > |
22 |
</ ul > |
23 |
</ li > |
24 |
< li >< a href = "#" >Contact</ a ></ li > |
25 |
</ ul > |
26 |
</ nav > |
27 |
< div class = "menu-toggle" > |
28 |
< a href = "https://www.jqueryscript.net/menu/" >Menu</ a > Toggler Here |
29 |
</ div > |
30 |
</ header > |
2. The CSS styles for the regular dropdown menu.
01 |
/* Header */ |
02 |
header { |
03 |
position : absolute ; |
04 |
top : 0 ; |
05 |
left : 0 ; |
06 |
padding : 0 100px ; |
07 |
background : #262626 ; |
08 |
width : 100% ; |
09 |
box-sizing: border-box; |
10 |
} |
11 |
12 |
/* LOGO */ |
13 |
header .logo { |
14 |
color : #FFF ; |
15 |
height : 50px ; |
16 |
line-height : 50px ; |
17 |
font-size : 24px ; |
18 |
float : left ; |
19 |
font-weight : bold ; |
20 |
} |
21 |
22 |
/* Dropdown Nav */ |
23 |
header nav { |
24 |
float : right ; |
25 |
} |
26 |
27 |
/* UL */ |
28 |
header nav ul { |
29 |
margin : 0 ; |
30 |
padding : 0 ; |
31 |
display : flex; |
32 |
} |
33 |
34 |
/* Nav Items */ |
35 |
header nav ul li { |
36 |
list-style : none ; |
37 |
position : relative ; |
38 |
} |
39 |
40 |
/* Sub-menu */ |
41 |
header nav ul li.sub-menu:before { |
42 |
content : 'f0d7' ; |
43 |
font-family : fontAwesome; |
44 |
position : absolute ; |
45 |
line-height : 50px ; |
46 |
color : #FFF ; |
47 |
right : 5px ; |
48 |
cursor : pointer ; |
49 |
} |
50 |
51 |
header nav ul li.active.sub-menu:before { |
52 |
content : 'f0d8' ; |
53 |
} |
54 |
55 |
header nav ul li ul { |
56 |
position : absolute ; |
57 |
left : 0 ; |
source : jquery.net |