3 Demos of Searchable Bootstrap Select menu by jQuery: bootmenu

The bootmenu plug-in

The Bootmenu enables creating the searchable and animated select menus in your web projects. You may use this as the sidebar navigation or incorporate this into the main header navigation bar or apply your own idea as far as placement is concerned.

A text box is given to search the menu items that you may customize easily.

Demo1 Demo2 Demo3
Developer’s page Download plug-in

Installing the bootstrap menu plug-in

You may install this simple plug-in via npm:

$ npm install –save bootmenu

Or download the copy from the above link and extract the package to get the required files.

Add the reference of the bootmenu.js file after the jQuery:

 <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”></script>

<script type=”text/javascript” src=”js/bootmenu/bootmenu.js”></script>

Initiate the plug-in with different available options:

$(“menu_div”).bootmenu({ params });

See the demo and code below for learning how to use the markup and script for creating this simple and cool menu with various options.

An example of animated Bootstrap select menu

See this demo where a Bootstrap select menu is created with a few option. As you click an item, the callback function will trigger an alert and the second menu will also display with the same menu items. The default color scheme is used for this menu:

jQuery bootstrap menu

See online demo and code

The script used for this demo:

 

The markup:

 

See the complete code on the demo page.

Changing the background and hover color example

By using the background and hoverColor options of the bootmenu plug-in, you may change the default background color other than blue and hover color as well.

See this example where I have used both options with different colors:

Bootstrap menu color

See online demo and code

The script for the first menu is changed as follows:

 

A demo of list animation and animation duration option

As mentioned earlier, the bootmenu is an animated select menu that until now you might not have noticed? Well, it is used!

The default value for the menu to display is slideDown (this is applied in all above examples).You may use the listAnimation and animationDuration options for setting that. Following listAnimation values can be set:

  • slideDown (default)
  • fade
  • slideLeft
  • rotate
  • fly

See this example where I used the slideLeft with 700milliseconds duration:

bootstrap animation

See online demo and code

The script:

 

See the complete code including the markup, dependency files, and script in the demo page.

For learning more about this plug-in, visit the developer’s page.