How to Make a Dropdown Menu with Just a Few Lines of Code

I spent 2 hours on this today, so I hope it helps someone to spend less time on it. My problem was that I was trying to do it in HTML5 alone.

I didn’t think about combining HTML + CSS, and at that point I didn’t care how it would look. I wanted to avoid JS at all costs.

I quite liked WAI-ARIA, a technology for making websites easily accessible, mainly via the keyboard. I looked at various sites that had aria-* attributes in their source code, but I couldn’t figure out how it all fits together – maybe partly because I was avoiding JavaScript.

In the end, though, when I discovered a tutorial on jQuery UI, I decided to give it a try. And it worked, right there on that website, so I downloaded the library and added it to the page along with jQuery:

XML

<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>

Then I copied the CSS:

CSS

<style type="text/css">
div#parent {
    width: 80px;
    margin: 10px auto;
    padding: 5px;
    border: 1px solid #777;
    background-color: #fbca93;
    text-align: center;

}
div.positionable {
    width: 75px;
    height: 75px;
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    background-color: #bcd5e6;
    text-align: center;

}
select, input {
    margin-left: 15px;

}
</style>

And then the JavaScript, which I tweaked a bit so that when something is hovered, the submenu is displayed. The method is universal, which means you only need to specify the parent and the element to be shown below it in the parameters of the setDynamicShow method, and the method takes care of everything:

<script type="text/javascript">
var positionable = ".positionable";
var parent = "#parent";

$(document).ready(function () {
        //-Here you can set up any number of buttons and other elements by calling the setDynamicShow method
        setDynamicShow(parent, positionable);
    });

function setDynamicShow(parent, positionable) {
    $(parent).hover(function () {
            $(positionable).show();
        });

    $(positionable).hover(function () {
            $(positionable).show();
        });

    $(positionable).mouseleave(function () {
            $(positionable).hide();
        });

    $(parent).mouseleave(function () {
            $(positionable).hide();
        });

    $(positionable).css("opacity", 0.5);
    $(positionable).hide();

    position(parent, positionable);

}

function position(parent, positionable) {
    $(positionable).position({
            of: $(parent),
            my: "right" + " " + "top",
            at: "right" + " " + "bottom",
            offset: "",
            collision: "none" + " " + "none"
        });

}
</script>

And finally, what is probably the simplest HTML code there can be – and yet it all works great:

XML

<div>
    <p>Button</p>
</div>
<div>
    <p>Submenu</p>
</div>

And last of all, just some pictures of how it works for me:

Leave a Reply Cancel reply