Thanks to this excellent tutorial from CSS-Tricks explaining how to create list-based menu into select dropdown on small screens, I was able to finally complete the product detail pages on Bluelounge website. My homework was not finished though. With around 20 active products on the website, I needed to preserve the product categories within the dropdown menu to make it easier for visitors to check out other products. With some adjustments and a few extra lines of codes, it now works the way I wanted.

Reading Requirement

Before I begin, please first read the tutorial from CSS-Tricks to understand the initial concept: Convert a Menu to a Dropdown for Small Screens

The HTML

Here is the simplified HTML I use for the navigation:

<ul id="list-products">
<li class="category"><h3>Cable Management</h3></li>
<li><a href="/products/sumo/">Sumo</a></li>
<li><a href="/products/cableboxmini/">CableBox Mini</a></li>
<li><a href="/products/cableclip/" >CableClip</a></li>
<li><a href="/products/cabledrop/">CableDrop</a></li>
<li><a href="/products/cablebox/">CableBox</a></li>
<li><a href="/products/cableyoyo/">Cableyoyo</a></li>
<li class="category"><h3>Stands</h3></li>
<li><a href="/products/mika/">Mika</a></li>
<li><a href="/products/milo/">Milo</a></li>
<li><a href="/products/nest/">Nest</a></li>
<li><a href="/products/notebookkit/">Notebook Kit</a></li>
<li><a href="/products/coolfeet/">Cool Feet</a></li>
<li class="category"><h3>Chargers</h3></li>
<li><a href="/products/minidock/">MiniDock</a></li>
<li><a href="/products/refresh/">Refresh</a></li>
<li><a href="/products/extraconnectors/">Extra Connectors</a></li>
<li><a href="/products/thesanctuary/">The Sanctuary</a></li>
</ul>

I use class=”category”  and <h3></h3>  for list items that are categories. Since we do not have a category page, the list items do not have a link.

jQuery

The fun part was to modify the original code to only create dropdown options from list items with class="category" and then list the following option with the URL as value until it finds the next category title.
Another code I added was to validate when changed if it has a (URL) value, otherwise it will not change the page.

// Create the dropdown base
$("<select />").appendTo(".productlist ");

// Create default option "Products."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Products"
}).appendTo(".productlist select");

// Populate dropdown with menu items
$(".productlist .category").each(function() { // List category titles
var el = $(this);
$("<option />", {
"text" : el.text(),
"class" : "category" // Add class to the menu item
}).appendTo(".productlist select");
// Look for next items until there it finds another category title
$(this).nextUntil(".productlist .category").each(function() {
var li = $('a', this);
$("<option />", {
"value" : li.attr("href"),
"text" : '- '+li.text()
}).appendTo(".productlist select");
});
});

Done. For real-life example, you can view it on Bluelounge product page.