How can I alter the visible menu according to which level I am on [closed]

Question

I want to be able to alter what is visible in the menu according to which level in the site structure I am on, for example

on top level page:-

Home Level 1 page (Current) -Level 2 page

-Level 2 page

-Level 2 page

Level 1 page

Level 1 page

Level 1 page

etc

on level 2 page:

Home Level 1 page (Current page parent)

-Level 2page (Current)

     -- Level 3 page (child of current)

     -- Level 3 page (child of current)

     -- Level 3 page (child of current)

-Level 2page

-Level 2page

-Level 2page

on level 3 page

Level 1 page

-Level 2page (parent)

    --Level 3 page (current)

Is this possible and how do I do it?

Many thanks

Answer 1

First you should use the menu builder in the backend to create your menu then use the classes for the different list items to hide or display the UL nested under them. For example

li ul { display: none; }
li.current-menu-item ul { display: block; }
li.current-menu-ancestor li ul { display: none; }
li.current-menu-ancestor li.current-menu-item ul { display: block; }

you can use this logic to hide and show all different levels of menus you have based on what page you are in. You may have to play around with parent classes overriding the display style, but thats the idea. If you view source you will see the classes available to you.