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

File Size: 8.84 KB
Views Total: 4793
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" />
<script src=""
<!--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">
  <div class="kite-search-trigger">
    <i class="fa fa-search"></i>
  <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> 
  <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>

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


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
    kiteSkin: "default"

5. Enable/disable box/text shadows.

    boxShadow: false,
    textShadow: false

About Author:

Author: Asif Mughal


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