drop down menu for page

  • My pages are displayed across the top of my website. I want to create a drop down menu from a parent page in the hopes of placing
    several subpages there. I thought it would do it automatically when I created my second page and placed it under the parent page, but it simply shows up next to the parent page across the top.
    Would fixing this be easy to do for someone who is new but unafraid of making the attempt?
    Any help or suggestions would be great.

    Below is the code in my header for my pages.

    <li class=”active”>/”>Home

    • <?php wp_list_pages(‘title_li=’); ?>
Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter kberele

    (@kberele)

    Oops. Here is my code. <li class=”active”>/”>Home

    • <?php wp_list_pages(‘title_li=’); ?>

      • `

    Thread Starter kberele

    (@kberele)

    <li class="active"><a href="<?php echo get_settings('home'); ?>/">Home</a></li>
			<li><?php wp_list_pages('title_li='); ?> </li>
    Cathy Mitchell

    (@multitalentedmommy)

    Here is the codex page with the different things you can get the wp_list_pages tag to do.
    It is already listed in hierarchical indented fashion, with no depth restrictions. You can change it so that it only displays the first page like so: <?php wp_list_pages('title_li=&depth=1');?>
    But to change the list to a drop-down requires some fancy dancing with css (which I’m totally frustrated with myself!) because of cross-browser issues. If you want to go there, start googling, drop down list, and there’ll be lots of pre-written scripts for you to use. Essentially, use the ul li:hover{} property. Which, incidentally ie6 refuses to recognize.

    Good luck!

    Thread Starter kberele

    (@kberele)

    Thanks. I actually did find some javascript online and got a drop down menu to show up in my site, but the subpages didn’t link properly. Then, I found a cool-sounding plugin, but I can’t get any plugins I upload to my hosting account to show up on my admin page, so now I am chasing that rainbow.

    Cathy Mitchell

    (@multitalentedmommy)

    Try this for a vertical drop down:
    Style your list items (in the code you pasted above) to float:left of each other.
    Then add this (which will work in IE7, and modern browsers):

    .nav ul li:hover ul{
	height:auto;
	margin: 0 -10000px -1000px 0;
  	position: relative;
}	/* in hover, ul will display directly under top item, with no width restriction per li  */

.nav ul li ul{
	float: left;
	margin: -10000px;
	clear: both;
	}/* the list is usually hidden some 10,000 pixels away*/

.nav ul li:hover ul li{
	float: left;
	clear: both;
	}/*each item in drop-down will clear the last and line up under the top floating item*/
/**********code written by Gunlaug Sorten***************/

    Then the js is needed to get the :hover thingy to work in other IE versions.

    wow, thank you multitalentedmommy. that was too easy!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘drop down menu for page’ is closed to new replies.