jQuery Hamburger Navigation Menu with Search box – Kite Menu

A responsive, simple, easy to use CSS3 & jQuery based hamburger navigation menu with search box. The menu comes with +7 built-in CSS gradients color schemes for Menu and one CSS animated hamburger icon that convert into cross while menu opened.


Plugin Overview

Plugin: kiteMenu
Author: Asif Mughal
Licence: MIT Licence
Published: February 16, 2019
Official Website: Go to website
Dependencies: jQuery 1.3.1 or Latest version and Font Awesome Iconic Fonts
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 8 KB

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.4.0.min.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. Now load the Kite Menu’s 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,
});

2 Comments

Leave a Reply

Your email address will not be published.


*