responsive header dropdown nav - Free Download Basic Responsive Header Dropdown Menu With jQuery And CSS3

Free Download Basic Responsive Header Dropdown Menu With jQuery And CSS3

Posted on

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.

responsive header dropdown nav - Free Download Basic Responsive Header Dropdown Menu With jQuery And CSS3
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;