Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by benfarnham
benfarnham
17,073 Points

How would I build a mobile menu with a never ending submenu's?

Alright, so I am creating this mobile menu for an e-commerce site so I need plenty of submenus for different catalogs and products. I have an idea for a menu that I have seen numerous times and I really want to learn how to build it for myself. I know I could use plugins but honestly, I would love to be able to build this thing for myself just so I understand how they work.

Here is an example of the horizontal submenu like action. It has it in both mobile and desktop menus but I really would love for users to have the option to just dig through layers of submenus to find specified items and have it condensed rather than your standard MASSIVE block of a dropdown menu.

How could I use jQuery / JavaScript / CSS to achieve this? I understand the HTML structure of using lists similar to: 

<ul>
    <li><a href="#">Link 1</a></li>
    <li>
        <a href="#">Link 2</a>
        <ul>
             <li><a href="#">Submenu Link 1</a></li>
             <li><a href="#">Submenu Link 2</a></li>
             <li><a href="#">Submenu Link 3</a></li>
        </ul>
    </li>
    <li><a href="#">Link 3</a></li>
</ul>

Would I float each submenu and just translate the overall container of the menu?

Any ways, thanks in advance for the insights guys! Best wishes to you all!

Jesus Mendoza
Jesus Mendoza
23,289 Points

Hey Ben, you could do that with only css.

There are 2 ways of doing it with only CSS:

  1. Only hover, meaning that it will only open the menus and submenus on hover (no clicks).
  2. With checkboxes and the :checked pseudo property which is a little bit harder.

You can also do it with jQuery tho