Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
​
    <div class="nav-component">
      <div class="container position-relative d-flex align-items-center justify-content-end">
        <button class="menu-toggle">OPEN MENU</button>
      </div>
      <nav>
        <div class="container position-relative d-flex align-items-center justify-content-end h-100">
          <ul class="menu">
            <li class="menu-item">
              <a href="#about-us">Lorem ipsum title 1</a>
              <span class="chevron"></span>
              <ul class="submenu">
                <li>
                  <a href="#history">Lorem ipsum dolor</a>
                  <span class="chevron"></span>
                  <ul class="submenu">
                    <li>Sub sub menu</li>
                    <li>Sub sub menu</li>
                  </ul>
                </li>
                <li>FIRST MENU</li>
​
              </ul>
            </li>
            <li class="menu-item">
              <a href="#capabilities">Lorem ipsum title 2</a>
              <span class="chevron"></span>
              <ul class="submenu">
                <li>2222 Lorem ipsum dolor</li>
​
              </ul>
            </li>
            <li class="menu-item">
              <a href="#sustainability">Lorem ipsum title 3</a>
              <span class="chevron"></span>
              <ul class="submenu">
                <li>333333 Lorem ipsum dolor</li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
​
 
    var nav = document.querySelector('.nav-component');
    var menuToggle = document.querySelector('.menu-toggle');
    var menuItem = document.querySelector('.menu-item');
    var itemOpened = document.querySelector('.item-opened');
    menuToggle.addEventListener("click", function() {
      nav.classList.toggle('open');
      document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
        openitem.classList.remove('item-opened');
      });
      document.querySelectorAll('.chevron').forEach(item => {
        item.addEventListener('click', event => {
          document.querySelectorAll('.chevron.item-opened').forEach(openitem => {
            openitem.classList.remove('item-opened');
          });
          item.classList.toggle('item-opened');
        })
      })
    }, false);
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers