Mobile-friendly Hamburger Navigation With Search Field - jQuery Kite Menu

Kite Menu is a responsive, mobile-friendly navigation system that allows the user to toggle the navigation menu by clicking/tapping the hamburger button.

Also provides a flexible search field that allows the user to directly search through your website in the navigation bar. The smooth menu open/close animations are based on the CSS3 transitions.

How to use it:

1. Load the Kite Menu plugin and other required resources in the html document.

<!--Kite Menu CSS-->
<link rel="stylesheet" href="assets/css/kite-menu.css" />
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<!--Kite Menu Js-->
<script src="assets/js/jquery.kitemenu.js"></script>

2. Build the HTML for the hamburger navigation & search field as follows. In this example, we're going to use Font Awesome for the search icons.

<nav class="kite-menu">
  <h2 class="kite-logo"> Your Logo </h2>
  <div class="kite-menu-trigger" id="hamburger">
    <span></span>
  </div>
  <div class="kite-search-trigger">
    <i class="fa fa-search"></i>
  </div>
  <div class="kite-search">
    <form action="#">
      <input type="text" autocomplete="off" name="search">
      <button type="submit" class="search-btn">
        <i class="fa fa-search"></i> 
      </button>
    </form>
  </div>
  <div class="links-wrapper">
    <ul class="menu-links">
      <li> <a href="#">Home</a> </li>
      <li> <a href="#">Blog</a> </li>
      <li> <a href="#">News</a> </li>
      <li> <a href="#">Contact</a> </li>
      <li> <a href="#5">About</a> </li>
    </ul>
  </div>
</nav>

3. Initialize kite menu by calling the function on the nav element.

$(document).ready(function(){
  $(".kite-menu").kiteMenu();
});

4. Change the default theme of the kite menu. All possible themes:

1. Default
2. Lush
3. Deep Purple
4. Rainbow
5. Instagram
6. Dimigo
7. Deep Space

$(document).ready(function(){
  $(".kite-menu").kiteMenu({
    kiteSkin: "default"
  });
});

5. Enable/disable box/text shadows.

$(document).ready(function(){
  $(".kite-menu").kiteMenu({
    boxShadow: false,
    textShadow: false
  });
});

About Author:

Author: Asif Mughal

Website: https://github.com/CodeHimBlog/jquery-kite-menu

---

This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.