Customize a menu so the top links dropdown only when clicked.

  • I want to make a menu that contains both drop downs that have links and links, however I want to make it so that the drop down parts only open up the drop down menu when clicked instead of sending you to another page. How can I alter the code in a way that I can do this?

    • This topic was modified 8 years, 1 month ago by nathanseto.
    • This topic was modified 8 years, 1 month ago by nathanseto.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator t-p

    (@t-p)

    What theme are you using?
    Downloaded from?

    Thread Starter nathanseto

    (@nathanseto)

    Hi t-p,
    Thanks for the response. I’m not using a theme. I tried building the menu myself with wp_nav_menu(), however it will only output links to a page. Is there a way to do turn those page links into a toggle for the dropdown instead?

    Moderator bcworkz

    (@bcworkz)

    Use the “wp_nav_menu” filter to change the href attribute to a hash # which would normally reload the same page. You would also add an “onclick” javascript function call. The function would first cancel the default action, then change the CSS of the submenu. If the display property is none, change it to block. If it’s block, change it to none. Thus one can toggle the display on or off by repeatedly clicking the main menu item.

    A nice enhancement would be to capture some keyboard events. If the menu item has focus and enter is pressed, toggle the submenu. If the submenu is displayed and escape is pressed, hide it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Customize a menu so the top links dropdown only when clicked.’ is closed to new replies.