Programmers’ Patch

A dropdown menu for toolbars using standard HTML elements

I wanted a dropdown menu in HTML but without the tons of javascript and complex stylesheets usually associated with such designs. My dropdown menu is built from two standard HTML elements: an input of type button, and a select. It needs a little vanilla javascript and css to make it work, but it is not excessive. It works on all major browsers.

Why not just use an ordinary select element on its own? Because then the currently selected item would occupy a variable amount of horizontal space. This menu is intended for use in a toolbar where space is at a premium. This way the button driving the menu is always only 1-character or 1 icon wide. With a variable width select if you choose a long item then the other buttons may wrap around onto the next line. Of course in select you can set its width to be a fixed value but then the current value is often unreadable.

Here's the code:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
#dropdown {display:none;position:absolute;}
#formats,#dropdown {border-radius:0;}
#selected {padding-left:0.5em;}
</style>
<script>
function display_menu(){
    let menu = document.getElementById("dropdown");
    menu.setAttribute("style","display:inline-block");
}
function change_menu(){
    let menu = document.getElementById("dropdown");
    let s = document.getElementById("selected");
    s.textContent = menu.options[menu.selectedIndex].value;
}
function select_menu(event){
    if ( event.target.tagName == 'OPTION' ){
        let parent = event.target.parentNode;
        if ( parent.tagName=="OPTGROUP" )
            parent = parent.parentNode;
        parent.setAttribute("style","display:none");
    }
}
window.onload = function(){
    let menu = document.getElementById("dropdown");
    let s = document.getElementById("selected");
    s.textContent=menu.value;
}
</script>
</head>
<body>
<div id="para"><input type="button" id="formats" value="f" onclick="display_menu()"></input><label id="selected"></label><br><select size="6" onmouseup="select_menu(event)" onchange="change_menu()" id="dropdown"><optgroup label="fruit"><option selected> pear</option><option>apple</option><option>banana</option></optgroup><optgroup label="vegetables"><option>potato</option><option>carrot</option><option>brocolli</option></optgroup></select></div>
<p>And some more text here</p>
</body>
</html>

The basic idea is to have a button on one line and a select on the next, separated by a <br>. The select menu is initially invisible. Clicking on the button makes it visible. Then it works like a normal select element, except that if you change the selected option or select the same one it makes the menu disappear. Enclosing the menu and its button in a div that is absolutely positioned makes the menu float over subsequent text, rather than pushing it down.

Here's the thing in action. (The label for the current value is for demo purposes, and in practice should be omitted or placed elsewhere on the page.)

pear

And some more text here.

Programmers’ Patch

Saturday, February 13, 2021

A dropdown menu for toolbars using standard HTML elements

No comments:

Post a Comment