Grow your CSS skills. Land your dream job.

Convert Menu to Dropdown: Prefix for sub-categories

  • # November 28, 2012 at 2:07 am

    Hi guys … I am just getting started with jQuery and I need some guidance here…

    I want to take the jQuery script found here http://css-tricks.com/convert-menu-to-dropdown/ and apply it for one of my ecommerce sites.

    But I need a slight modification … I need the sub-categories (and 2nd level sub-categories and so on) to have a prefix (–) for the menu to be more readable.

    I have managed to get it to work with 1st level sub-categories using this code:
    var prefix = (el.parent().hasClass(‘level1′) == true) ? “- ” : “”;

    Now I don’t know how to get to work for even deeper categories.

    I have uploaded the modification to codepen to make it easier for you guys to get the whole concept. You can find it here: [http://codepen.io/anon/pen/rlfhq](http://codepen.io/anon/pen/rlfhq “http://codepen.io/anon/pen/rlfhq”)

    Your help is much appreciated! Thank you!

    # November 30, 2012 at 12:20 pm

    Update:

    I just managed to solve this myself after a while of testnig.

    If anyone is interested, the result looks like this: http://codepen.io/anon/pen/JbACk

    Might come in handy for other people that want to add more mobile-friendly navigation for their ecommerce sites with big catalogues.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".