Open subcategories in submenu on click in primary menu

2 Views

I am figuring out a way if we can manage the menu in such a way that when I click on the menu item in the first menu, the sub categories or links that i choose should be displayed in the secondary menu.. say for example when I click on Entertainment in the nav menu, the subcategories/topics like gossips, hollywood, bollywood should be appear in the menu beneath the primary menu… (eg.. have a look at ibnlive.com or latimes.com website, it works in a similar passion)…

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You can do this one of three ways:

    1. The first been you would need to make the menu static within the theme itself so you have full control over all the anchor links and classes
    2. In the menu manager you could assign a custom class to the anchor link and then bind jQuery events to the anchor links so they correspond to a specific menu of your choice
    3. Create a plugin that allows you to set an option that allows specific menus to become children of the parent as a separate menu still but only accessible by hovering over a menu item that has been assigned a submenu

    Hope that helps a bit more.

  2. I’ve done this on numerous sites but my implementation is via only ONE menu with the help of CSS. (You can also use JavaScript for some cool effects.)

    Under Appearance -> Menus, I create one menu and drag submenu links under their ‘parent’ link in that one menu. (The beauty of this solution is that it is simple, and if you needed to add a third level in the future, it wouldn’t require that much additional work.)

    • Cars
      • Porcshe
      • Maserati
      • Aston Martin
    • Cities
      • New York
      • Chicago
      • Los Angeles

    Then I use CSS to style these. When you are on a page, WordPress will use a ‘current’,’parent’, or ‘ancestor’ menu item class. These can be used to display the appropriate menu. And you will also take advantage of the ‘:hover’ pseudo class to display the appropriate submenu on hover. You can also opt for jQuery’s show() and hide() methods if you want to incorporate some slick JS animation.

    It would take a bit of work to output all of the appropriate CSS and jQuery here, so I hope this points you in the right direction.