Vertical menu enhanced

We updated the Showroom and Pace theme

Mar
27

Up until now, all YOOtheme templates came with a horizontal dropdown menu. Showroom was the first theme to make use of a vertical navigation. This type of navigation has a completely different usability, but also brought new challenges for us.

The main problem when activating a submenu is that the dropdown disappears, whenever you move your mouse directly into the dropdown by leaving the red area in the following example. Usually this issue is solved by adding a delay when activating the dropdown. We decided to use another approach.

Inspired by the mega menu from Amazon we implemented the jQuery-menu-aim plugin by Ben Kamens in the latest version of the Pace and Showroom theme.

Old vertical menu behavior

Old cursor area Old menu behavior

How does the new vertical Menu work?

By activating a submenu, the menu-aim plugins permanently applies a triangle between the current mouse position and the left corners of the dropdown menu. If your mouse stays within that red area, the dropdown remains activated. Once the cursor leaves the red area, another submenu will be activated immediately. This also works perfectly on RTL.

New vertical menu behavior

New cursor area New menu behavior

With this update the navigation is much more intuitive and easier to use, providing for a better user experience. Enjoy!

By Pawel | | Posted in Themes

Comments (17)

  • miljan

    miljan

    | Profile |
    well done! :)
  • joomill

    joomill

    | Profile |
    Great work!
  • hubert.cole

    hubert.cole

    | Profile |
    That fixes a big issue. I love it and I will use on a current project
  • amir.hesari

    amir.hesari

    | Profile |
    Tank you YOOtheme. That fixes a big issue :)
  • webintec

    webintec

    | Profile |
    This is why we love YOOtheme. They always improve them selve. Thanks for make the web a better place to stay.
  • drwatson

    drwatson

    | Profile |
    great, thanks for optimizing! :)
  • alessandro.monticelli

    alessandro.monticelli

    | Profile |
    thank you guys well done!
  • bdthemes

    bdthemes

    | Profile |
    that's great :)
  • gustavo.perez

    gustavo.perez

    | Profile |
    How i can do the upgrade?
  • maxim.pavlov

    maxim.pavlov

    | Profile |
    Wow!
  • bernd.guenter.75

    bernd.guenter.75

    | Profile |
    Well done!
  • colin.kirsch

    colin.kirsch

    |
    We have 35 top level menu items with dropdowns (as you can see at oldbike.eu/museum) but they don't all load on the new menu, is there a limit?
  • robhparker

    robhparker

    | Profile |
    Where is the new template guys?
  • weibusi

    weibusi

    | Profile |
    Where is the new template guys?
  • thor

    thor

    | Profile |
    From great to awesome. Love the template and that you guys take your time to do these revisions. Helps out a lot. Keep up the good work!
  • sean.owens.44

    sean.owens.44

    | Profile |
    Good solution to the non nimble mouse users of this world.
    Is very usable and almost there in terms of a solution.

    Next solution required :
    Mouse_unfocus presumes your next move is vertical or horizontal and not diagonal. Hmmmm
  • sara.conserva

    sara.conserva

    | Profile |
    This is smart! I really appreciate it!

Leave a comment

Please login to leave a comment.