theenglishway-utils
/
css-sandbox


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body class="body-- nodebug">
  <h1>Dropdown (small container)</h1>
  <div class="show-case">
    <div class="dropdown">
      <span class="dropdown__trigger">Drop</span>
      <ul class="dropdown__menu dropdown__menu--hidden">
        <li class="dropdown__item">Item 1</li>
        <li class="dropdown__item">Item 2</li>
        <li class="dropdown__item">Item 3</li>
        <li class="dropdown__item">Item 4</li>
      </ul>
    </div>
  </div>

  <h1>Dropdown</h1>
  <div class="show-case show-case--big">
    <div class="dropdown">
      <button class="dropdown__trigger">Drop</button>
      <ul class="dropdown__menu dropdown__menu--hidden">
        <li class="dropdown__item">Item 1</li>
        <li class="dropdown__item">Item 2</li>
        <li class="dropdown__item">Item 3</li>
        <li class="dropdown__item">Item 4</li>
      </ul>
    </div>
  </div>
</body>

<script>
  const handleDropdownMenus = (window) => {
    const dropdowns = document.getElementsByClassName('dropdown')
    const menus = document.getElementsByClassName('dropdown__menu')
    const buttons = document.getElementsByClassName('dropdown__trigger')

    for (const d of dropdowns) {
      const button = d.querySelector('.dropdown__trigger')
      const menu = d.querySelector('.dropdown__menu')

      button.onclick = (e) => {
        e.stopPropagation()
        menu.classList.toggle('dropdown__menu--hidden')
        button.classList.toggle('dropdown__trigger--active')
      }
    }

    document.onclick = () => {
      for (const menu of menus) {
        menu.classList.add('dropdown__menu--hidden')
      }
      for (const button of buttons) {
        button.classList.remove('dropdown__trigger--active')
      }
    }
  }
  handleDropdownMenus()
</script>

</html>