Bootstrap 5 priority nav using VanillaJS

Bootstrap 5 priority nav using VanillaJS

by kkermani

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/gijsroge/priority-navigation/master/dist/priority-nav.min.js"></script>
<nav class="navbar navbar-expand fixed-top be-top-header top_nav_bar_custom">

  <a class="navbar-brand" href="#">

    <img src="https://fits-tracs-stg.its.sfu.ca/public/images/sfu_etracs.png" alt="" width="200"></a>
  <ul class="mr-auto">

<li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
  </li>
  </ul>
</nav>

CSS

/*
 * Core styles for PriorityNav.js
 * These styles are not optional and should always be included
 *
 * Free to use under the MIT License.
 * http://twitter.com/GijsRoge
 */
.priority-nav {
  white-space: nowrap;
  /*
    * Makes sure the menu's are inline-block so they don't take up
    * the entire width of its parent. This will break the plugin.
    */
}

.priority-nav ul {
  display: inline-block;
  
}

.priority-nav li {
  display: inline-block;
}

.priority-nav-has-dropdown .priority-nav__dropdown-toggle {
  position: relative;
 
}

.priority-nav__wrapper {
  position: relative;
  
  
}

.priority-nav__dropdown {
  position: absolute;
  visibility: hidden;
}

.priority-nav__dropdown.show {
  visibility: visible;
  
}

.priority-nav__dropdown-toggle {
  visibility: hidden;
  position: absolute;
  
}

.priority-nav-is-visible {
  visibility: visible;
  
}

.priority-nav-is-hidden {
  visibility: hidden;
}

/* klk */

nav {
  margin: 7rem 0;
  padding: 0 4rem;
  min-width: 250px;
  position: relative;
  white-space: nowrap;
  max-width: 950px;
  -webkit-animation: resize 4s 1 cubic-bezier(0.4, 0, 0.2, 1);
  animation: resize 4s 1 cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
@media (max-width: 650px) {
  nav {
    padding: 0;
    min-width: 100px;
  }
  nav .wrapper {
    padding: 0 1rem;
  }
}
nav ul {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
nav li {
  display: inline-block;
}
nav li:first-child a {
  padding-left: 0;
}
@media (max-width: 650px) {
  nav li:first-child a {
    padding-left: 0.5rem;
  }
}
nav a {
  display: inline-block;
  padding: 4rem 2rem;
  font-weight: 700;
}
@media (max-width: 650px) {
  nav a {
    padding: 2rem 1rem;
  }
}
nav .knob {
  cursor: ew-resize;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(50%);
  transform: translateY(-50%) translateX(50%);
}
@media (max-width: 1000px) {
  nav .knob {
    display:...

JavaScript

// https://gijsroge.github.io/priority-nav.js/

/*
 * priority-nav - v1.0.11 | (c) 2016 @gijsroge | MIT license
 * Repository: https://github.com/gijsroge/priority-navigation.git
 * Description: Priority+ pattern navigation that hides menu items if they don't fit on screen.
 * Demo: http://gijsroge.github.io/priority-nav.js/
 */
!function(a,b){"function"==typeof define&&define.amd?define("priorityNav",b(a)):"object"==typeof exports?module.exports=b(a):a.priorityNav=b(a)}(window||this,function(a){"use strict";function b(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}var c,d,e,f,g,h,i,j,k,l={},m=[],n=!!document.querySelector&&!!a.addEventListener,o={},p=0,q=0,r=0,s={initClass:"js-priorityNav",mainNavWrapper:"nav",mainNav:"ul",navDropdownClassName:"nav__dropdown",navDropdownToggleClassName:"nav__dropdown-toggle",navDropdownLabel:"...",navDropdownBreakpointLabel:"menu",breakPoint:500,throttleDelay:50,offsetPixels:0,count:!0,moved:function(){},movedBack:function(){}},t=function(a,b,c){if("[object Object]"===Object.prototype.toString.call(a))for(var d in a)Object.prototype.hasOwnProperty.call(a,d)&&b.call(c,a[d],d,a);else for(var e=0,f=a.length;f>e;e++)b.call(c,a[e],e,a)},u=function(a,b){for(var c=b.charAt(0);a&&a!==document;a=a.parentNode)if("."===c){if(a.classList.contains(b.substr(1)))return a}else if("#"===c){if(a.id===b.substr(1))return a}else if("["===c&&a.hasAttribute(b.substr(1,b.length-2)))return a;return!1},v=function(a,b){var c={};return t(a,function(b,d){c[d]=a[d]}),t(b,function(a,d){c[d]=b[d]}),c},w=function(a,b){if(a.classList)a.classList.toggle(b);else{var c=a.className.split(" "),d=c.indexOf(b);d>=0?c.splice(d,1):c.push(b),a.className=c.join(" ")}},x=function(a,b){return...