This time I will share jQuery Plugin and tutorial about Responsive Scrolling Bootstrap Nav Menu Plugin With jQuery – Carousel Menu, hope it will help you in programming stack.
The Bootstrap Carousel Menu plugin allows you to convert the native Bootstrap nav into a carousel-style scrolling menu with next/prev navigation. Great for long site navigation when there is no enough screen space to display all the menu items.
How to use it:
1. Make sure you have jQuery library loaded in your Bootstrap project.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/hbootstrap.min.js"></script> |
3 |
<link href="/path/to/bootstrap.min.css" rel="stylesheet"> |
2. Download and include the Bootstrap Carousel Menu plugin’s JavaScript and CSS on the webpage.
1 |
<script src="/path/to/carousel-menu.css.js"></script> |
2 |
<link href="/path/to/carousel-menu.css" rel="stylesheet"> |
3. Create the scrolling Bootstrap nav following the markup structure like this:
01 |
<nav role="navigation" class="navbar"> |
02 |
<div class="navbar-header"> |
03 |
<button data-target=".horizontal-menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> |
05 |
<span class="icon-bar"></span> |
06 |
<span class="icon-bar"></span> |
07 |
<span class="icon-bar"></span> |
11 |
<div class="collapse navbar-collapse horizontal-menu"> |
12 |
<ul class="nav navbar-nav"> |
13 |
<li class="active"><a href="#">Home</a></li> |
14 |
<li><a href="#">Link 1</a></li> |
15 |
<li><a href="#submenu">Link 2</a></li> |
17 |
<ul class="nav navbar-nav"> |
19 |
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a> |
20 |
<ul class="dropdown-menu"> |
21 |
<li><a href="#">Item 1</a></li> |
22 |
<li><a href="#">Item 2</a></li> |
23 |
<li><a href="#">Item 3</a></li> |
26 |
<li><a href="#submenu">Link 3</a></li> |
27 |
<li><a href="#submenu">Link 4</a></li> |
4. Initialize the plugin and we’re done.
1 |
$('nav').carouselMenu(); |
5. Default plugin options.
1 |
$('nav').carouselMenu({ |
5 |
nextClass: "button right", |
6 |
nextId: "carousel-menu-next", |
7 |
prevClass: "button left", |
8 |
prevId: "carousel-menu-prev" |
This awesome jQuery plugin is developed by islavisual. For more Advanced Usages, please check the demo page or visit the official website.
