Mega Menu in jQuery with Touch Enabled - Swipe Drawer

- September 12, 2018
Mega Menu in jQuery

The "Swipe Drawer" is a simple navigation system to organize your website's data in efficient way. It is fully supported by all modern browsers and devices.

On mobile, this menu is fully touch friendly, you can open and close by swipe left and right respectively. However, menu trigger is also available to do the same work.

The menu hide when user scroll down to read the article, but show immediately when user scroll up.

Main Features

  • Fully responsive - will adapt to any device.
  • Supports swipe to open and close menu.
  • Show on top when user sroll up.
  • Unlimited dropdown can be added.
  • Small file size, fully themed, simple to implement.
  • CSS transitions with jQuery fallback.
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
  • Attractive flat colors.
  • Slide and Fade Effects.
  • Clean and simple HTML structure.
  • Auto width, Vertical Slide, Adaptiveheight, Rtl support...
  • Font Awesome icons installed.
  • SEO and user friendly.
  • Easy to navigate, implement and customize.

How to Use

1. Add the jQuery Swipe Drawer's JavaScript and Stylesheet to the webpage.

 <link rel="stylesheet" href="css/swipe.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous">
</script>
<script src="js/swipe.js"> </script>

2. Following is the HTML Structure for Swipe Menu, add it in the web page.

<header class="swipe-menu default-theme">
   <div class="logo"> 
      Your Logo
   </div>
   <div class="codehim-search-trigger"></div>
   <div class="codehim-search">
      <form>
         <input class="search-text" placeholder="Type to search..." autocomplete="on" name="search" type="text" />
         <button class="search-now" name="submit" type="submit" disabled="true"> Search </button>
      </form>
      <div class="back-arrow"></div>
   </div>
   <!--//codehim-search-->
   <!--Navigation Icon-->
   <div class="nav-icon">
      <span></span>
      <span></span>
      <span></span>
   </div>
   <nav class="codehim-nav">
      <div class="tab-container">
         <span class="tab-name tab-name1-active"> My Projects</span>
         <span class="tab-name"> Tutorials  </span>
      </div>
      <!--//Tab Container-->
      <div class="tab tab-active">
         <ul class="menu-item">
            <li> <a href="#1"> Website Templates </a> </li>
            <li class="has-sub">
               <span class="dropdown-heading"> Jquery Projects</span> <!--Do not add any link in li that has sub items // Use span for dropdown heading--> 
               <ul>
                  <li><a href="#2"> Sub Item 1</a> </li>
                  <li> <a href="#2"> Sub Item 2 </a> </li>
                  <li> <a href="#2"> Sub Item 3 </a> </li>
                  <li> <a href="#2"> Sub Item 4 </a> </li>
               </ul>
            </li>
            <li> <a href="#1"> Recommended </a> </li>
            <li> <a href="#1"> Top Ten</a> </li>
         </ul>
         <ul class="my-codehim">
            <li> <a class="help" href="#1"> Help & Feedback </a> </li>
            <li> <a class="updates" href="#1"> Subscribe Me</a> </li>
            <li> <a class="request" href="#1"> Request for Code</a></li>
         </ul>
         <div class="social">
            <div class="facebook"></div>
            <div class="twitter"></div>
            <div class="gplus"> </div>
         </div>
         <!--//social-->
      </div>
      <!--//Tab-->
      <div class="tab">
         <ul class="menu-item">
            <li> <a href="#1"> Latest Updates </a> </li>
            <li> <a href="#1"> How to Coding </a> </li>
            <li class="has-sub">
               <span class="dropdown-heading"> Designing Tutorials</span> 
               <ul>
                  <li><a href="#2"> Sub Item 1</a> </li>
                  <li> <a href="#2"> Sub Item 2 </a> </li>
                  <li> <a href="#2"> Sub Item 3 </a> </li>
                  <li> <a href="#2"> Sub Item 4 </a> </li>
                  <li> <a href="#2"> Sub Item 5 </a> </li>
               </ul>
            </li>
            <li class="has-sub">
               <span class="dropdown-heading"> Development Tutorials</span> 
               <ul>
                  <li><a href="#2"> Sub Item 1</a> </li>
                  <li> <a href="#2"> Sub Item 2 </a> </li>
                  <li> <a href="#2"> Sub Item 3 </a> </li>
               </ul>
            </li>
            <li> <a href="#1"> Most Recently</a> </li>
         </ul>
      </div>
      <!--//Tab-->
   </nav>
</header>
<div class="dim-overlay"> </div>
 

Start typing and press Enter to search