YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Vertical menu enhanced

We updated the Showroom and Pace theme


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


    | Profile |
    well done! :)
  • joomill


    | Profile |
    Great work!
  • hubert.cole


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


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


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


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


    | Profile |
    thank you guys well done!
  • bdthemes


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


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


    | Profile |
  • bernd.guenter.75


    | Profile |
    Well done!
  • 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


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


    | Profile |
    Where is the new template guys?
  • 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


    | 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


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

Leave a comment

Please login to leave a comment.