Grow your CSS skills. Land your dream job.

WordPress custom menu action – newbie struggling

  • # February 7, 2013 at 5:37 am

    Hi,

    I’m trying to create a menu (in WP 3.5) that does the following:

    – User clicks on ‘Products’ (as an example). The user is then taken to the ‘Products’ page and the
    submenu is open and **stays open even if the user is not hovering on it**.

    I suppose what I’m trying to describe is that there are two actions with one mouse-click.

    An example is [Viewport Industries](http://http://viewportindustries.com “Viewport Industries”)
    If you click on ‘Products’, you’re taken to the page, but once you take the cursor off the ‘Products’ area, the submenu disappears.

    I want the submenu to stay open once the page is active, and also for the sub-menu to stay open if the user clicks on the choices and goes to those pages (‘Insites’, ‘Digest’ and ‘Starkers’ in the Viewport Industries case).

    I’m baffled about how to make this happen, so any help would be greatly appreciated.

    Many thanks

    # February 7, 2013 at 8:51 am

    Wordpresses’ wp_nav function needs a bit of CSS for drop downs to work which I’m assuming you already have implemented. You should have a piece of CSS like this:

    ul.menu li.hover > ul.sub-menu{display:block;}

    This code basically says to display the sub menu if the parent li is being hovered. If you are using the wp_nav function to call your menus you could probably get away with amending that line of code to something like this.

    ul.menu li.current_page_item > ul.sub-menu{display:block};

    It will display any sub-menus listed under the current page items list element. Not 100% there but it’s definitely a push in the right direction. Hope it helps.

    ___________________________

    Upon doing a bit more research I found out that if you change “current_page_item” to “current_page_ancestor” it should also work when your on a page that is a child of that menu li.

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".