Responsive Scrolling Bootstrap Nav Menu Plugin With jQuery - Carousel Menu

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.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/hbootstrap.min.js"></script>
<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.

<script src="/path/to/carousel-menu.css.js"></script>
<link href="/path/to/carousel-menu.css" rel="stylesheet">

3. Create the scrolling Bootstrap nav following the markup structure like this:

<nav role="navigation" class="navbar">
  <div class="navbar-header">
    <button data-target=".horizontal-menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
      <span class="sr-only">Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div class="collapse navbar-collapse horizontal-menu">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#submenu">Link 2</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li><a href="#submenu">Link 3</a></li>
      <li><a href="#submenu">Link 4</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

4. Initialize the plugin and we're done.

$('nav').carouselMenu();

5. Default plugin options.

$('nav').carouselMenu({
  duration: 500, // in ms
  height: 'auto',
  hoverEffect: false,
  nextClass: "button right",
  nextId: "carousel-menu-next",
  prevClass: "button left",
  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.