Menu on page with parent page and its child pages

  • I have been scouring the codex, but not finding exactly what I need.

    I have a site that will have three levels, lets say level A (top Level), Level B (child pages of Level A), Level C (Child pages of Level B)

    Level B will be the Main pages for 10 different travel destinations.

    Level C will be different pages with details about each of those travel destinations.

    On BOTH the level B and Level C pages, I need to have a horizontal menu on that page (apart from main site navigation) that shows a link to both the main Level B page AND each of the Level C pages that are its children.

    Like this:

    Blue Beach Main page | Maps | Travel tips |Tours

    Where “Blue Beach Main Page” is the level B page, and the rest are its children. Again, I need that same navigation on all of the 4 pages.

    I am finding ways to do various things that are CLOSE, but not quite . . .

Viewing 1 replies (of 1 total)

  • When displayed the menu will look like that:

    Menu A1 | Menu A2
    Menu B1 | Menu B2 | Menu B3 /* displays when hover the menu A1*/
    Menu C1 | Menu C2 | Menu C3 /* displays when hover the menu B1*/

    Down below I have creted the corect structural markup for that.

    <ul>

    <!--level A 1 list starting here-->
	<li><a href="level_1">Level A 1</a>

    	<ul>

        	<li><a href="level_B_1">Level B 1 Destinations</a>

            	<ul>

                    <li><a href="level_C_1">Level C 1 Details</a></li>

                    <li><a href="level_C_3">Level C 2 Details</a></li>

                    <li><a href="level_C_3">Level C 3 Details etc</a></li>

                </ul>

            </li>

            <li><a href="level_B_2">Level B 2 Destinations</a></li>

            <li><a href="level_B_3">Level B 3 Destinations etc</a></li>

        </ul>

    </li><!--level A 1 list closing here-->

    <li><a href="level_A_2">Level A 2</a></li>

</ul>

    If you have CSS knowledge you wil understand

    ul, ul li {margin:0; padding:0} /*margin and padding reset*/

ul a {padding:0 5px; background:#FFFFFF; color:#FF9900} /*background color for first level submenu*/

ul ul a {background:#CCCCCC;} /*background color for second level submenu*/

ul ul ul a {background:#993333} /*background color for third level submenu*/

ul li {display:inline; float:left} /*display all submenu list items in line*/

ul ul {position:absolute} /*necessary to take second and third level submenus out of flow*/

ul ul {display:none} /*hides second and third level submenu*/

ul li:hover ul {display:block} /*displayes the second and third level submenu*/

ul li:hover ul ul {display:none} /*hides third level submenu when shows the second*/

ul ul li:hover ul {display:block} /* now shoes again third level menu when hover a second item menu*/

    As bottom of line, the menu from above is far from perfect but shows the basic principle. For example it will need some javascript to show up in IE6, and you have some problem with padding, because li tag has display:inline. It needs to be floated, but needs more work for that.

    When you figure out this, you can go and search in WordPress codex how to replace static menu items with dynamic code!

Viewing 1 replies (of 1 total)
  • The topic ‘Menu on page with parent page and its child pages’ is closed to new replies.