Menu, show top level item with first level child but enable hover for 2nd level

  • stnick

    (@stnick)


    9 years, 2 months ago

    Hello, I’m trying to figure out the following, let’s say you have a menu with 3 top items:

    (Item 1) (Item 2) (Item 3)

    When the browser has navigated to Item 1, it only shows the children of Item 1, children of Item 2 & 3 are invisble:

    >(Item 1) (Item 2) (Item 3)
    (Item 1 child a) (Item 1 child b) (Item 1 child c)

    However, underneath child a, there are again 3 children which only should be displayed on hover:

    >(Item 1) (Item 2) (Item 3)
    (Item 1 child a:hover) (Item 1 child b) (Item 1 child c)
    (child a-a) (child a-b) (child a-c) (<- should only be visible upon hover event)

    I’m trying to solve this through css but so far I only managed to select all child classes through classes like .current-menu-ancestor. Even if I use things like #menu-item-xxx, the children of that item also get selected.

    However, I’d like to create a menu which displays the first level of children of the active parent whilst allowing a hover for the last level. Am I missing something here?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter stnick

    (@stnick)

    9 years, 2 months ago

    nobody?

    WPyogi

    (@wpyogi)

    9 years, 2 months ago

    Sorry you’re not getting a reply as fast as you need, but these are volunteer forums and 5 hour is not a long wait. Perhaps you should consider hiring someone to help you – http://jobs.wordpress.net/

    Please also see:

    http://codex.wordpress.org/Forum_Welcome#No_Bumping

    Moderator bcworkz

    (@bcworkz)

    9 years, 2 months ago

    Complex menu effects using only CSS is a real challenge. There may be a way to do this with CSS alone, if someone were a CSS expert. I’m not, and there may not be a way AFAIK. I myself would resort to javascript or jQuery. Then the problem is reduced to something fairly straight forward with onmouseover and onmouseout event handlers. Additionally, there are all sorts of JS menu scripts available. If you don’t find one that does exactly what you want, you could always modify one.

    Thread Starter stnick

    (@stnick)

    9 years, 2 months ago

    I see, could you point me to a good one?

    Moderator bcworkz

    (@bcworkz)

    9 years, 2 months ago

    I’m not a good judge of what’s “good” since I’ve not used many menu scripts. It’s more that I’ve noticed them about. That said, have a look at jQuery UI Menu. This widget (not a WP widget) is part of your WP distribution and is already registered. You only need to enqueue it.

    It may not do what you want “out of the box”, but it’s configurable and extensible, so you should be able to figure out something. I’ve not used this myself, but it looks promising. Good luck!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu, show top level item with first level child but enable hover for 2nd level’ is closed to new replies.