Owl Carousel Navigation Menu

Using the plugin as a Navigation Menu

by Vince

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800,900"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
  <!-- HEADER-->
  <header class="affix" id="header-container">
    <div id="header-bottom">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <!-- - root += 'images'-->
            <!-- Owl Navigation-->
            <div class="ccp-nav owl-carousel" id="advisor_menu">
              <div class="nav-items"><a href="#!" rel="advisorItem-about-us"><span class="adv-item">About Us</span></a></div>
              <div class="nav-items"><a href="#!" rel="advisorItem-crystal-candidates"><span class="adv-item">Candidates&trade;</span></a></div>
              <div class="nav-items"><a href="#!" rel="advisorItem-crystal-proposals"><span class="adv-item">Proposals&trade;</span></a></div>
              <div class="nav-items"><a href="#!" rel="advisorItem-crystal-analytics"><span class="adv-item">Analytics&trade;</span></a></div>
              <div class="nav-items"><a href="#!" rel="advisorItem-crystal-research"><span class="adv-item">Research&trade;</span></a></div>
             ...

CSS

#header-container {
  top: 0;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  z-index: 999;
}

@media only screen and (max-width: 704px) {
  #header-container .hidden-xs-mid-sm {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
  #header-container .row.xs-no-gutter > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

@media only screen and (min-width: 641px) and (max-width: 768px) {
  #header-container .row.sm-no-gutter > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

@media only screen and (min-width: 769px) and (max-width: 991px) {
  #header-container .row.md-no-gutter > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #header-container .row.lg-no-gutter > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

#header-container a, #header-container .btn-primary {
  font-size: 18px;
}

#header-container .btn.btn-primary {
  background-color: transparent;
  border-color: #FFF;
  border-radius: 10px;
  line-height: 1.75em;
  min-height: 40px;
}

@media only screen and (max-width: 768px) {
  #header-container .btn.btn-primary {
    display: inline-block;
    min-height: 0;
  }
}

#header-container a, #header-container a:link, #header-container a:visited {
  color: #FFFFFF;
  text-decoration: none;
  outline: none;
}

#header-container .col-xs-centered,
#header-container .col-sm-centered,
#header-container .col-md-centered {
  display: block;
  margin: auto;
  float: none;
}

#header-container .row-eq-height {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

#header-container .dropdown-menu {
  max-height: 600px;
  overflow-y: auto;
}

#header-container .dropdown-menu a {
  color: black;
}

@media only screen and (max-width: 1200px) {
  #header-container #header-top .container,
  #header-container...

JavaScript

$(function () {
	/* Custom Event: "resized" */
	var resizeTimer;
	$(window).on('resize', function () {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function () {
			$(window).trigger('resized');
		}, 250);
	});
	/* Custom Polyfill */
	if (!String.prototype.includes) {
		String.prototype.includes = function () {
			'use strict';
			return String.prototype.indexOf.apply(this, arguments) !== -1;
		}
	}
	function SubmenuConst (query, options) {
		var self = this;
		var query = query;
		var queryChildren = query + ' .submenu-containers';
		var activeClass = 'active';
		var dropdownClass = 'isDropped';
		var idNavQuery = '.nav-items ';
		var navRolloverClass = 'hovered';
		var adjPositionBreakpoint = 768;
		this.options = options;
		this.$isDropped = undefined;
		this.state = false;
		this.id = undefined;
		this.owlQuery = undefined;
		this.close = function (callback) {
			self.state = false;
			$(query).removeClass(activeClass).trigger('cssClassChangeUndo');
			if (self.$isDropped) {
				self.$isDropped.removeClass(dropdownClass);
				$('[rel="'+self.id+'"]').removeClass(activeClass);
			}
			if (typeof callback == 'function') {
				callback();
			}
		};
		this.open = function (callback) {
			/* First Pane Open */
			$(queryChildren).removeClass(activeClass);
			$(queryChildren+':first-child').addClass(activeClass);
			self.state = true;
			$(query).addClass(activeClass).trigger('cssClassChanged');
			if (self.$isDropped) {
				self.$isDropped.addClass(dropdownClass);
				$('[rel="'+self.id+'"]').addClass(activeClass);
			}
			if (typeof callback == 'function') {
				callback();
			}
		};
		this.toggle = function (mainMenuItem) {
			if (self.state) {
				self.close();
			} else if (!self.state) {
				self.open();
			}
		};
		/* Submenu Tabs Event Handler (classnames only) */
		$(window).on('resized load', function () {
			var condition_a = $(document).width() > adjPositionBreakpoint;
			var condition_b = $(document).width() < adjPositionBreakpoint;
			if...