dropdown.js

A simple jQuery dropdown menu script.

by Shobhit Sharma

HTML

<div class="container">
    <h1>Dropdown</h1>
    <ul class="dropdown">
        <li class="dropdown-toggle">
            <a href="#">Menu</a>
        </li>
        <li class="dropdown-item">
            <a href="#">Link</a>
        </li>
        <li class="dropdown-item">
            <a href="#">Link</a>
        </li>
        <li class="dropdown-item">
            <a href="#">Link</a>
        </li>
        <li class="dropdown-item">
            <a href="#">Link</a>
        </li>
    </ul>
</div>

CSS

/* Container */
 .container {
    margin: 0 auto;
    padding: 0 1.5em;
    max-width: 720px;
}
/* Dropdown */
 .dropdown {
    padding: 0;
    list-style: none;
    max-width: 240px;
    background-color: #ccc;
    border-radius: 4px;
}
.dropdown-toggle, .dropdown-item {
    padding: 8px 0;
    text-align: center;
}

JavaScript

function dropDownMenu() {

    "use strict";

    var slideSpeed = 600;

    $(".dropdown-item").hide();

    $(".dropdown-toggle").click(function () {
        $(".dropdown-item").slideToggle(slideSpeed);
    });

}

$(document).ready(function () {

    "use strict";
    dropDownMenu();

});