Responsive Multi-level Menu to Dropdown

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:

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.

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

Leave a Reply