Skip to content
jQuery & CSS Hamburger Navigation Menu with Search box.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
docs
.gitattributes
Info.txt
LICENSE
README.md
index.html
kite-menu.html

README.md

jQuery Hamburger Navigation Menu with Search box.

A responsive, simple, easy to use hamburger navigation menu with search box.
Browse: jQuery Kite Menu Demo

Main Features

  • Fully Responsive (Mobile first Design).
  • Simple and Clean Design.
  • +7 Built-In CSS Gradients Color for Menu.
  • CSS Animated Hamburger Icon to Toggle the Menu.
  • CSS Sliding and Fading Effects.
  • Built-In Morden Search Form Design.
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported

How to Use it

1. First of all load the jQuery (JavaScript library) and Font Awesome CSS iconic library into your webpage.

<!--jQuery-->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<!--Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

2. Now load the Kite Menu CSS and JS files:

<!--Kite Menu CSS-->
<link rel="stylesheet" href="assets/css/kite-menu.css" />

<!--Kite Menu Js--> <script src="assets/js/jquery.kitemenu.js"></script>

3. Create HTML structure like below that contains following classes.

<!--Start Kite Menu-->
<nav class="kite-menu">
   <h2 class="kite-logo"> kite Menu</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="#1">Home </a> </li>
         <li> <a href="#2"> Blog</a> </li>
         <li> <a href="#3">News </a> </li>
         <li> <a href="#4">Contact </a> </li>
         <li> <a href="#5">About </a> </li>
      </ul>
   </div>
</nav>
<!--End Kite Menu-->

4. Now, it's time to initialize kite menu plugin, call the plugin with the following selector in jquery document ready function.

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

5. To change the kite menu skin color, put the name of theme in the following string option.

$(".kite-menu").kiteMenu({
 kiteSkin: "theme-name",
  });

The built-in themes name are as follows:

  1. default
  2. lush
  3. deep-purple
  4. rainbow
  5. instagram
  6. dimigo
  7. deep-space

6. To enable/disable text and box shadow: (default is false).

$(".kite-menu").kiteMenu({
 boxShadow: true,
 textShadow: true, 
  });

Author:

Asif Mughal
URL: www.codehim.com

You can’t perform that action at this time.