Horizontal Scrolling ScrollSpy Responsive Menu Bootstrap 4.3.1

HTML

              
                
<body data-spy="scroll" data-target="#secondary-nav" data-offset="55">
  
<header id="secondary-nav" class="secondary-nav shadow-sm position-sticky" style="top:0;">
<div class="container">
<nav class="vam nav scroll dragger scroller">
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-id="overview" aria-controls="overview">Overview</a>
      <div id="overview" class="submenu">
        <div class="container scroll dragger scroller">
          <a class="dropdown-item" href="#fat">Project Summary</a>
          <a class="dropdown-item" href="#two">Construction Phases</a>
          <a class="dropdown-item" href="#three">Amenities</a>
          <a class="dropdown-item" href="#">Specifications</a>
        </div>
      </div>
    </li>
    <li class="nav-item"><a href="#mdo" class="nav-link">Floor Plans & Pricing</a></li>
    <li class="nav-item"><a href="#one" class="nav-link">Location</a></li>
    <li class="nav-item"><a href="#three" class="nav-link">Resale/Investor Flats</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Home Loan</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-id="more" aria-controls="more">More</a>
      <div id="more" class="submenu">
        <div class="container scroll dragger scroller" aria-labelledby="more">
          <a class="dropdown-item" href="#">Similar Projects</a>
          <a class="dropdown-item" href="#">Discussions</a>
          <a class="dropdown-item" href="#">Reviews</a>
          <a class="dropdown-item" href="#">Report Error</a>
        </div>
      </div>
    </li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
</nav>
  
</div>
</header>



<div id="tabcontent" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
  <h4 id="mdo">@mdo</h4>
  <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
  <h4 id="one">one</h4>
  <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
  <h4 id="two">two</h4>
  <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
  <h4 id="three">three</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
  
  <h4 id="four">three</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
</div>
  
</body>

CSS

              
                body {position:relative;}

header.secondary-nav .scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

header.secondary-nav .scroll::-webkit-scrollbar {
  display: none;
}

header.secondary-nav .submenu {
  display:none;
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height: 0;
  clear: both;
  background-color: #fbf7fc;
  box-shadow: 0 .3rem .3rem rgba(0,0,0,.15)!important;
}

header.secondary-nav .submenu.visible {
  display:block;
  height: auto;
  border-top: 1px solid #e8e8e8;
}

header.secondary-nav .dropdown {position:inherit;}
header.secondary-nav .dropdown-item {display: inline-block; font-size:0.8rem; font-weight:500; width:auto; clear:inherit; padding: 12px;}
header.secondary-nav .dropdown-toggle.visible {background:#fbf7fc}
header.secondary-nav .dropdown-item.active, header.secondary-nav .dropdown-item:active, header.secondary-nav .dropdown-item:hover  {background:#fff; color:#6a2c79;}

/*Don't Remove this give class/id if required*/
header.secondary-nav, header.secondary-nav nav {
  font-size: 0;
}

header.secondary-nav {
  background-color: #fff;
  // border-top: 1px solid #e2e2e3;
  // border-bottom: 1px solid #e2e2e3;
  position: relative;
  z-index: 2;
  clear: both;
  width: 100%;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}

header.secondary-nav .vam {
  display: inline-block;
  vertical-align: middle;
}

header.secondary-nav .nav {
  width: 100%;
}

header.secondary-nav .nav-item {
  display: inline-block;
  vertical-align: middle;
  // cursor: pointer;
}

header.secondary-nav .nav-link{
  padding: 18px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  header.secondary-nav::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;
    width: 35px;
    background: linear-gradient(to left, #e3e3e3, rgba(37, 40, 61, 0));
    pointer-events: none;
    transition: opacity .2s;
  }
  header.secondary-nav .nav-link {padding: 14px 10px;}
}

header.secondary-nav .nav-link.active {color: #000; box-shadow: inset 0px -3px 0px 0px #fdac00;}

JS

              
                (function (window, document, undefined) {
  'use strict';
  
  // Select nav items that have submenus
  var hasSubmenu = document.querySelectorAll('[data-id]');
  var visible = 'visible';
  var i = 0;
  
  // Show the submenu by toggling the relevant class names
  function showSubmenu (event) {
    // We lose reference of this when filtering the nav items
    var self = this;
    
    // Select the relevant submenu, by the data-id attribute
    var submenu = document.getElementById(self.dataset.id);
    
    // Probably best to prevent clicks through
    event.preventDefault();
    if(!$(submenu).hasClass(visible)){
      $('.nav-link').removeClass(visible);
      $('.submenu').removeClass(visible);
    }

    self.classList.toggle(visible);
    submenu.classList.toggle(visible);
  }
  
  // Remove the active class
  function removeChildClass(el) {
    // Check if it exists, then remove
    if ( el.classList.contains(visible) ) {
      el.classList.remove(visible);
    }
  }
  
  // On clicks show submenus
  for ( i = 0; i < hasSubmenu.length; i++ ) {
    hasSubmenu[i].addEventListener('click', showSubmenu);
  }
})(window, document);


/*---------- DRAGGER ----------*/
$(document).ready(function() {
  $('.dragger').mousedown(function (event) {
    $(this)
      .data('down', true)
      .data('x', event.clientX)
      .data('scrollLeft', this.scrollLeft)
      .addClass("dragging");

    return false;
  }).mouseup(function (event) {
    $(this)
      .data('down', false)
      .removeClass("dragging");
  }).mousemove(function (event) {
    if ($(this).data('down') == true) {
      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
  }).mousewheel(function (event, delta) {
    this.scrollLeft -= (delta * 30);
  }).css({
    'overflow' : 'hidden',
    'cursor' : '-moz-grab'
  });
  $(window).mouseout(function (event) {
    if ($('.team-form-data').data('down')) {
      try {
        if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
          $('.team-form-data').data('down', false);
        }
      } catch (e) {}
    }
  });
});


/*---------- SCROLLER ----------*/
jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

$(document).ready(function() {
    $('.scroller').hScroll(); // You can pass (optionally) scrolling amount
});

/*---- ANCHOR LINK ANIMATION WITH OFFSET ----*/
$(".secondary-nav a[href^='#']").on('click', function(event) {
  var target = this.hash;

  event.preventDefault();

  var navOffset = $('.secondary-nav').height();

  return $('html, body').animate({
    scrollTop: $(this.hash).offset().top - navOffset
  }, 300, function() {
    return window.history.pushState(null, null, target);
  });
});

$(".secondary-nav li").click(function() {
  centerLI(this, '.vam');
  // Dropdown Toggle
  if(!$(this).hasClass('dropdown')){
    $('.nav-link').removeClass('visible');
    $('.submenu').removeClass('visible');
  }
});

//http://stackoverflow.com/a/33296765/350421
 function centerLI(target, outer) {
   var out = $(outer);
   var tar = $(target);
   var x = out.width() - 50;
   var y = tar.outerWidth(true);
   var z = tar.index();
   var q = 0;
   var m = out.find('li');
   for (var i = 0; i < z; i++) {
     q += $(m[i]).outerWidth(true);
   }
   //out.scrollLeft(Math.max(0, q - (x - y)/2));
   out.animate({
     scrollLeft: Math.max(0, q - (x - y) / 2)
   }, 500);

 }

// Dropdown Close on Body click
$(document).mouseup(function(e) 
{
    var container = $("#secondary-nav");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        $('.nav-link').removeClass('visible');
        $('.submenu').removeClass('visible');
    }
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions