Examples of categorized option within a dropdown? - html

Question

I'm looking for websites to use as an example that use categorized options within a drop down.
These may look like:
Fruit
Apple
Pear
Peach
Melon
Vegetables
Asparagus
Beetroot
Broccoli
Herbs
Basil
Dill
Ginger
The headings wouldn't be clickable, only the child options would be.
I'm sure I have seen websites do this before, but I'm struggling to find a good example.
Does anyone know of any websites that have adopted this method?

Answer 1

This is a simple dropdown with categorization.
<select>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="peach">Peach</option>
<option value="melon">Melon</option>
</optgroup>
<optgroup label="Vegetables">
<option value="asparagus">Asparagus</option>
<option value="beetroot">Beetroot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
<optgroup label="Herbs">
<option value="basil">Basil</option>
<option value="dill">Dill</option>
<option value="ginger">Ginger</option>
</optgroup>
</select>

Answer 2

Use bootstrap's navbar with dropdown to reach this job:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
in the snippet you only will see the "smartphone version" due to width of snipet window, copy the code and test it by yourself in a full page.
Parent elements are clickable only to drop down child elements, and child elements are clickable to go somewhere.

Answer 3

you can do this as pure HTML and even through jQuery.
For HTML bellow is the snippet
<select>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="peach">Peach</option>
<option value="melon">Melon</option>
</optgroup>
<optgroup label="Vegetables">
<option value="asparagus">Asparagus</option>
<option value="beetroot">Beetroot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
<optgroup label="Herbs">
<option value="basil">Basil</option>
<option value="dill">Dill</option>
<option value="ginger">Ginger</option>
</optgroup>
</select>
and for jQuery bellow is snippet
<div class="dropdown">
<a id="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu" style="display:none;">
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Peach</li>
<li>Melon</li>
</ul>
<h3>Vegetables</h3>
<ul>
<li>Asparagus</li>
<li>Beetroot</li>
<li>Broccoli</li>
</ul>
<h3>Herbs</h3>
<ul>
<li>Basil</li>
<li>Dill</li>
<li>Ginger</li>
</ul>
</div>
</div>
and here is it jQuery
<script>
$('#dropdown').click(function(event) {
$('.dropdown-menu').slideToggle();
});
</script>