On top of it, the site is integrated with the always awesome Kirby CMS.

Check it out at houseofkooser.com

The post Latest project: House of Kooser appeared first on Michael Sunarlim.

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.

The post Responsive Multi-level Menu to Dropdown appeared first on Michael Sunarlim.