Mega Dropdown


    1. Playing soccer

      Soccer is a team sport played between two teams of eleven players with a spherical ball.

    2. Dancing

      Dance is a performing art form consisting of purposefully selected sequences of human movement.

      1. Salsa

        Salsa is a popular form of social dance that originated in the Caribbean.

      2. Rock’n’Roll

        Rock’n’Roll is a very athletic, competitive form of partner dance that originated from lindy hop.

    3. Gardening

      Gardening is the practice of growing and cultivating plants as part of horticulture.


  2. Please fill out the form below with your credentials.

    Login

    No credentials yet? Please do something of the following:

    • Register your own account.
    • Hack another user’s account.
    • Leave and never come back.
  3. About

Code

<button>Focusable element before</button>
<ol data-adg-dropdown=""><br>
  <li>
    <button aria-expanded="false">▾ Physical activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Playing soccer
          <p>
            Soccer is a team sport played between two teams of eleven players with a spherical ball.
          </p>
        </a>
      </li>
      <li>
        <span>Dancing
          <p>
            Dance is a performing art form consisting of purposefully selected sequences of human movement.
          </p>
        </span>
        <ol>
          <li>
            <a href="http://www.google.ch/search?q=salsa">Salsa
              <p>
                Salsa is a popular form of social dance that originated in the Caribbean.
              </p>
            </a>
          </li>
          <li>
            <a href="http://www.google.ch/search?q=rocknroll">Rock'n'Roll
              <p>
                Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.
              </p>
            </a>
          </li>
        </ol>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=gardening">Gardening
          <p>
            Gardening is the practice of growing and cultivating plants as part of horticulture.
          </p><br>
        </a>
      </li>
    </ol>
  </li>
  <li>
    <button aria-expanded="false">▾ Login</button>
    <form>
      <p>
        Please fill out the form below with your credentials.
      </p>
      <fieldset>
        <legend>Login</legend>
        <div>
          <label for="login">Name</label><input id="login" type="text" />
        </div>
        <div>
          <label for="password">Password</label><input id="password" type="password" />
        </div>
        <div>
          <input type="submit" value="Login" />
        </div>
      </fieldset>
      <p>
        No credentials yet? Please do something of the following:
      </p>
      <ul>
        <li>
          Register your own account.
        </li>
        <li>
          Hack another user's account.
        </li>
        <li>
          Leave and never come back.
        </li>
      </ul>
    </form>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=about">About</a>
  </li>
</ol>
<p>
  <button>Focusable element after</button>
</p>
*:focus {
  outline: 2px dotted #000;
  outline-offset: 2px;
}

p {
  clear: left;
}
p button {
  margin-top: 20px;
}

ol {
  padding: 0;
}
ol > li {
  float: left;
  list-style: none;
  position: relative;
}
ol a, ol button, ol span {
  display: block;
  border: 1px solid #000;
  color: #000;
  background-color: lightyellow;
  padding: 10px;
  width: 200px;
  box-sizing: border-box;
}
ol span {
  font-style: italic;
}
ol a, ol button {
  text-decoration: none;
}
ol a:hover, ol button:hover {
  text-decoration: underline;
}
ol button {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  height: 40px;
}
ol button:hover {
  cursor: pointer;
}
ol button[aria-expanded=true] + form, ol button[aria-expanded=true] + ol {
  position: absolute;
  background-color: lightyellow;
  border: 1px solid #000;
}
ol button[aria-expanded=true] + form {
  left: -100px;
  right: -100px;
  padding: 10px;
}
ol button[aria-expanded=true] + form label {
  display: inline-block;
  width: 100px;
  margin-bottom: 10px;
}
ol button[aria-expanded=true] + ol {
  position: absolute;
}
ol button[aria-expanded=true] + ol a, ol button[aria-expanded=true] + ol span {
  font-weight: bold;
  width: 500px;
}
ol button[aria-expanded=true] + ol p {
  font-weight: normal;
  display: inline-block;
}
ol button[aria-expanded=true] + ol ol a, ol button[aria-expanded=true] + ol ol span {
  padding-left: 40px;
}
ol button[aria-expanded=true] + ol ol ol a, ol button[aria-expanded=true] + ol ol ol span {
  padding-left: 80px;
}
ol button[aria-expanded=false] + ol, ol button[aria-expanded=false] + form {
  display: none;
}
(function() {
  var AdgDropdown;

  AdgDropdown = class AdgDropdown {
    constructor(el) {
      this.$el = $(el);
      this.initExpandables();
    }

    initExpandables() {
      return this.$el.find("[aria-expanded]").click((e) => {
        var $button, $container;
        $button = $(e.target);
        $container = $($button.next("*"));
        if ($container.is(':visible')) {
          return this.hide($button, $container);
        } else {
          return this.show($button, $container);
        }
      });
    }

    show($button, $container) {
      $container.attr('hidden', false);
      return $button.attr('aria-expanded', true);
    }

    hide($button, $container) {
      $container.attr('hidden', true);
      return $button.attr('aria-expanded', false);
    }

  };

  $(document).ready(function() {
    return $('[data-adg-dropdown]').each(function() {
      return new AdgDropdown(this);
    });
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFNLGNBQU4sTUFBQSxZQUFBO0lBQ0UsV0FBYSxDQUFDLEVBQUQsQ0FBQTtNQUNYLElBQUMsQ0FBQSxHQUFELEdBQU8sQ0FBQSxDQUFFLEVBQUY7TUFDUCxJQUFDLENBQUEsZUFBRCxDQUFBO0lBRlc7O0lBSWIsZUFBaUIsQ0FBQSxDQUFBO2FBQ2YsSUFBQyxDQUFBLEdBQUcsQ0FBQyxJQUFMLENBQVUsaUJBQVYsQ0FBNEIsQ0FBQyxLQUE3QixDQUFtQyxDQUFDLENBQUQsQ0FBQSxHQUFBO0FBQ3ZDLFlBQUEsT0FBQSxFQUFBO1FBQU0sT0FBQSxHQUFVLENBQUEsQ0FBRSxDQUFDLENBQUMsTUFBSjtRQUNWLFVBQUEsR0FBYSxDQUFBLENBQUUsT0FBTyxDQUFDLElBQVIsQ0FBYSxHQUFiLENBQUY7UUFFYixJQUFHLFVBQVUsQ0FBQyxFQUFYLENBQWMsVUFBZCxDQUFIO2lCQUNFLElBQUMsQ0FBQSxJQUFELENBQU0sT0FBTixFQUFlLFVBQWYsRUFERjtTQUFBLE1BQUE7aUJBR0UsSUFBQyxDQUFBLElBQUQsQ0FBTSxPQUFOLEVBQWUsVUFBZixFQUhGOztNQUppQyxDQUFuQztJQURlOztJQVVqQixJQUFNLENBQUMsT0FBRCxFQUFVLFVBQVYsQ0FBQTtNQUNKLFVBQVUsQ0FBQyxJQUFYLENBQWdCLFFBQWhCLEVBQTBCLEtBQTFCO2FBQ0EsT0FBTyxDQUFDLElBQVIsQ0FBYSxlQUFiLEVBQThCLElBQTlCO0lBRkk7O0lBSU4sSUFBTSxDQUFDLE9BQUQsRUFBVSxVQUFWLENBQUE7TUFDSixVQUFVLENBQUMsSUFBWCxDQUFnQixRQUFoQixFQUEwQixJQUExQjthQUNBLE9BQU8sQ0FBQyxJQUFSLENBQWEsZUFBYixFQUE4QixLQUE5QjtJQUZJOztFQW5CUjs7RUF1QkEsQ0FBQSxDQUFFLFFBQUYsQ0FBVyxDQUFDLEtBQVosQ0FBa0IsUUFBQSxDQUFBLENBQUE7V0FDaEIsQ0FBQSxDQUFFLHFCQUFGLENBQXdCLENBQUMsSUFBekIsQ0FBOEIsUUFBQSxDQUFBLENBQUE7YUFDNUIsSUFBSSxXQUFKLENBQWdCLElBQWhCO0lBRDRCLENBQTlCO0VBRGdCLENBQWxCO0FBdkJBIiwic291cmNlc0NvbnRlbnQiOlsiY2xhc3MgQWRnRHJvcGRvd25cbiAgY29uc3RydWN0b3I6IChlbCkgLT5cbiAgICBAJGVsID0gJChlbClcbiAgICBAaW5pdEV4cGFuZGFibGVzKClcbiAgICBcbiAgaW5pdEV4cGFuZGFibGVzOiAtPlxuICAgIEAkZWwuZmluZChcIlthcmlhLWV4cGFuZGVkXVwiKS5jbGljayAoZSkgPT5cbiAgICAgICRidXR0b24gPSAkKGUudGFyZ2V0KVxuICAgICAgJGNvbnRhaW5lciA9ICQoJGJ1dHRvbi5uZXh0KFwiKlwiKSlcbiAgICAgIFxuICAgICAgaWYgJGNvbnRhaW5lci5pcygnOnZpc2libGUnKVxuICAgICAgICBAaGlkZSgkYnV0dG9uLCAkY29udGFpbmVyKVxuICAgICAgZWxzZVxuICAgICAgICBAc2hvdygkYnV0dG9uLCAkY29udGFpbmVyKVxuICAgICAgICBcbiAgc2hvdzogKCRidXR0b24sICRjb250YWluZXIpIC0+XG4gICAgJGNvbnRhaW5lci5hdHRyKCdoaWRkZW4nLCBmYWxzZSlcbiAgICAkYnV0dG9uLmF0dHIoJ2FyaWEtZXhwYW5kZWQnLCB0cnVlKVxuICAgIFxuICBoaWRlOiAoJGJ1dHRvbiwgJGNvbnRhaW5lcikgLT5cbiAgICAkY29udGFpbmVyLmF0dHIoJ2hpZGRlbicsIHRydWUpXG4gICAgJGJ1dHRvbi5hdHRyKCdhcmlhLWV4cGFuZGVkJywgZmFsc2UpXG4gICAgXG4kKGRvY3VtZW50KS5yZWFkeSAtPlxuICAkKCdbZGF0YS1hZGctZHJvcGRvd25dJykuZWFjaCAtPlxuICAgIG5ldyBBZGdEcm9wZG93biBAIl19
//# sourceURL=coffeescript