Dropdown Menu

by Doug Hill

HTML

<script src="http://att.dougahill.com/_scripts/bootstrap/3.1.1/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://att.dougahill.com/_css/bootstrap/3.1.1/bootstrap.css">
<link rel="stylesheet" href="http://att.dougahill.com/_css/custom/global/dropdowns.css">
<link rel="stylesheet" href="http://att.dougahill.com/_css/custom/global/elements.css">
<div class="dropdown open">
    <button class="btn btn-default dropdown-toggle sr-only" type="button" id="dropdownMenuID" data-toggle="dropdown">Dropdown <span class="caret"></span>

    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuID">
        <li role="presentation" class="dropdown-header">Dropdown Header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">A Link</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">B Link</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">C Link</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">Dropdown Header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated A Link</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated B Link</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated C Link</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">Dropdown Header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Enabled A Link</a>
        </li>
        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled B Link</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Enabled C Link</a>
        </li>
    </ul>
</div>
<div class="pull-right dropdown open">
   ...

CSS

@charset"UTF-8";

/*DROPDOWN EXAMPLES*/
 #ex_dropdown {
    height: 400px;
    min-height: 360px;
}

JavaScript

jQuery(document).ready(function () {
    $('[rel="dropdown"],[data-rel="dropdown"],[data-toggle="dropdown"]').dropdown();
});