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
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dropdown test page</title>
  <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.3/css/aui.css" media="all">
  <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.3/css/aui-experimental.css" media="all">
  <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.8.3/js/aui.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.8.3/js/aui-experimental.js"></script>
</head>
<body>
  <div style="padding: 20px;">
    <h1>AUI Dropdown test page</h1>
    <p>
      <button class="aui-button aui-dropdown2-trigger" aria-controls="test-dropdown0" aria-haspopup="true" role="button">Account menu</button>
        <div id="test-dropdown0" class="aui-dropdown2 aui-style-default" role="menu" aria-hidden="true">
          <div role="application">
            <div role="presentation" class="aui-dropdown2-section">
              <strong role="presentation" class="aui-dropdown2-heading">Your account</strong>
              <div role="group" aria-label="Your account">
                <ul role="presentation">
                  <li role="presentation">
                    <a role="menuitem" href="#ViewProfile">View profile</a>
                  </li>
                  <li role="presentation">
                    <a role="button" class="aui-dropdown2-sub-trigger" aria-controls="sean" href="#Status">Status</a>
                    <div id="sean" class="aui-dropdown2 aui-style-default" role="menu" aria-hidden="true">
                      <div role="application">
                        <div role="presentation" class="aui-dropdown2-section">
                          <strong role="presentation" class="aui-dropdown2-heading">Status</strong>
                          <div role="group" aria-label="Status">
                            <ul role="presentation">
                              <li role="presentation">
                                <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-checked aui-dropdown2-interactive">Online</span>
                              </li>
                              <li role="presentation">
                                <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-interactive">Away</span>
                              </li>
                              <li role="presentation">
                                <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-interactive">Do not disturb</span>
                              </li>
                              <li role="presentation">
                                <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-interactive">Appear offline</span>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li role="presentation">
                    <a role="menuitem" class="aui-dropdown2-disabled" href="#LogOut" aria-disabled="true">Log out</a>
                  </li>
                </ul>
              </div>
            </div>
            <div role="presentation" class="aui-dropdown2-section">
              <strong role="presentation" class="aui-dropdown2-heading">Operating system</strong>
              <div role="group" aria-label="Operating system">
                <ul role="presentation">
                  <li role="presentation">
                    <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-checked aui-dropdown2-interactive">OSX</span>
                  </li>
                  <li role="presentation">
                    <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-interactive">Windows</span>
                  </li>
                  <li role="presentation">
                    <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-interactive">iOS</span>
                  </li>
                  <li role="presentation">
                    <span role="menuitemradio" class="aui-dropdown2-radio aui-dropdown2-disabled aui-dropdown2-interactive">Linux</span>
                  </li>
                </ul>
              </div>
            </div>
            <div role="presentation" class="aui-dropdown2-section">
              <strong role="presentation" class="aui-dropdown2-heading">Installed browsers</strong>
              <div role="group" aria-label="Installed browsers">
                <ul role="presentation">
                  <li role="presentation">
                    <span role="menuitemcheckbox" class="aui-dropdown2-checkbox aui-dropdown2-checked aui-dropdown2-interactive">Chrome</span>
                  </li>
                  <li role="presentation">
                    <span role="menuitemcheckbox" class="aui-dropdown2-checkbox aui-dropdown2-interactive">Firefox</span>
                  </li>
                  <li role="presentation">
                    <span role="menuitemcheckbox" class="aui-dropdown2-checkbox aui-dropdown2-disabled aui-dropdown2-interactive">Internet Explorer</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </p>
    </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
seancurtispro
0viewers