Tuesday, September 3, 2013

How to make drop down menus using JQuery

A cool little thing I learned today using JQuery (so I guess this kind of doubles as a TIL as well). You know the drag-down boxes located at some websites? Well, it's easy to do using some JS.

First, set up your html:

<!DOCTYPE html>
<html>
    <head>
    <title>[Title]</title>
        <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
        <script type='text/javascript' src='script.js'></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
        <div id="menu">
            <h3>[h3]</h3>
            <div>
                <p>[p]</p>
            </div>
            <h3>[h3]</h3>
            <div>
                <p>[p]</p>
            </div>
            <h3>[h3]</h3>
            <div>
                <p>[p] </p>
            </div>
        </div>
</body>
</html>


Most of this should seem pretty elementary to you. Well, the "h3" will be what displays as the "name" dropdown (aka the thing you see before dropping it down) while the <p> text is what follows.

Here's the actual JS:

$(document).ready(function() {
    $("#menu").accordion({collapsible: true, active: false});
});

The function is a pre-made feature inside of JQuery. I just thought it was kinda cool.

---

Twitter: @CodexofAegis
Facebook: facebook.com/CodexofAegis 

No comments:

Post a Comment

Number one rule: Don't be a dick.