WordPress.org

1. pwdiane
   Member
   Posted 3 years ago #

   I like the drop downs from the main menu bar for child pages. I don't know how to do that or where to get that piece.

   Thanks for your help
   Diane

2. Michael Dance
   Member
   Posted 3 years ago #

   The easiest way is to just use one of the many themes that supports drop-down hover menus.

   But if you want to code it yourself:

   The wp_list_pages function automatically lists child pages as nested unordered lists like this:

   <ul>
      <li>Parent Page 1</li>
      <li>Parent Page 2
         <ul>
            <li>Child Page 1</li>
            <li>Child Page 2</li>
         </ul>
      </li>
      <li>Parent Page 3</li>
   </ul>

   (Note that the Parent Page 2 li tag doesn't close until after the nested list is closed.)

   So from that you have to make your elements look something like this in style.css:

   /* get rid of ugly pre-formatting */
   
   ul {
   list-style:none;
   margin:0;
   padding:0;
   }
   
   /* make the main navigation list horizontal */
   
   ul li {
   float:left;
   padding:5px;
   }
   
   /* make the child navigation list vertical */
   
   ul li ul li {
   clear:both;
   }
   
   /* make the child list hidden by default */
   
   li ul {
   display:none;
   }
   
   /* make the child list appear when you hover over the parent */
   
   li:hover > ul {
   display:block;
   }

   That's the basic functionality to get you started.

Topic Closed

This topic has been closed to new replies.