Nation Library - Dropdown example

Shows how to create a basic dropdown

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/VerticalScrollbar.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Dropdown.js"></script>
<div class="js-dropdown">
  <a href="#" class="js-current">{{defaultOption}}</a>
  <div class="js-options">
    <div class="js-scrollable">
      <ul>
        <li><a href="option1">Option 1</a></li>
        <li><a href="option1">Option 2</a></li>
        <li><a href="option1">Option 3</a></li>
        <li><a href="option1">Option 4</a></li>
        <li><a href="option1">Option 5</a></li>
        <li><a href="option1">Option 6</a></li>
        <li><a href="option1">Option 7</a></li>
        <li><a href="option1">Option 8</a></li>
        <li><a href="option1">Option 9</a></li>
        <li><a href="option1">Option 10</a></li>
        <li><a href="option1">Option 11</a></li>
        <li><a href="option1">Option 12</a></li>
        <li><a href="option1">Option 13</a></li>
        <li><a href="option1">Option 14</a></li>
        <li><a href="option1">Option 15</a></li>
        <li><a href="option1">Option 16</a></li>
      </ul>
    </div>
    <div class="js-scrollbar">
      <div class="js-track">
        <div class="js-handle"></div>
      </div>
    </div>
  </div>
</div>

CSS

.js-dropdown {
  position: relative;
  width: 40%;
  max-width: 200px;
}

.js-dropdown .js-current {
  display: block;
  padding: 10px;
  color: #fff;
  font-family: sans-serif;
  background: #0C54D9;
}
.js-current.active {
  
}

.js-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ddd;
}

.js-dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.js-dropdown a {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
  font-family: sans-serif;
  background: #fff;
}

.js-dropdown a:hover {
  background: #eee;
}

.js-dropdown .js-current:hover {
  background: #0D398B;
}

.js-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: #0D398B;
}

.js-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.js-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #7FF6D1;
}

JavaScript

// This example creates a dropdown from existing HTML,
// but the class can also create one by providing it with 
// an empty element as the selector, and the selectElement 
// option with a native form select element.

// Element to use as a dropdown
var element = document.documentElement.querySelector(".js-dropdown");

// Add a custom label
var options = {
  label: "Select an option"
}

// Create the dropdown
var dropdown = new NATION.Dropdown(element, options);