WordPress.org

1. particlepat
   Member
   Posted 2 years ago #

   How do I create a horizontal drop down menu with out using the confusing plugins? I want to create a menu that will be reflected as I create pages, so when I create a child or even a grandchild of a page I won't have to go back and edit the code. Can anyone help me out or point me in the right direction?

2. TransPersonal
   Member
   Posted 2 years ago #

   I don't get all the plugins for this purpose either, there's no need for them. Here's what I use:

   <ul id="navNew" class="dropdown dropdown-horizontal">
   <li id="n-shows"><a href="#">Something</a>
   <ul>
   	<li><a href="#">Item 1</a></li>
   	<li><a href="#">Item 2</a></li>
   	<li><a href="#">Item 3</a></li>
   	<li><a href="#">Item 4</a></li>
   	<li><a href="#">Item 5</a></li>
   </ul>
   </li>
   </ul>
   </ul>
   
   </ul>

   And the CSS:

   ul.dropdown ul a {
           width: 133px;
   }
   ul.dropdown,
   ul.dropdown li,
   ul.dropdown ul {
           list-style: none;
           margin: 0;
           padding: 0;
   }
   ul.dropdown {
           position: relative;
           z-index: 597;
           float: left;
   }
   ul.dropdown li {
           float: left;
           line-height: 1.3em;
           vertical-align: middle;
           zoom: 1;
   }
   ul.dropdown li.hover,
   ul.dropdown li:hover {
          position: relative;
          z-index: 599;
          cursor: default;
   }
   ul.dropdown ul {
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 598;
          width: 100%;
   }
   ul.dropdown ul li {
          float: none;
   }
   ul.dropdown ul ul {
          top: 1px;
          left: 99%;
   }
   ul.dropdown li:hover > ul {
          visibility: visible;
   }
   ul.dropdown li.rtl ul {
          top: 100%;
          right: 0;
          left: auto;
   }
   ul.dropdown li.rtl ul ul {
          top: 1px;
          right: 99%;
          left: auto;
   }
   ul.dropdown li a,
   ul.dropdown *.dir {
           border-style: solid;
           border: 1px;
           border-color: #404040;
   	background: url(styles/default/img/pigs.png) repeat-x;
   }
   
   /* Without this the drop down is not marginalized to the left */
   
   ul.dropdown ul {
   	left: auto;
   	right: 0;
   	width: 150px;
   	margin-top: -1px;
   	border-top: 1px solid #1a1a1a;
   	border-left: solid 1px #4c4c4c;
   	font:;
   }

3. TransPersonal
   Member
   Posted 2 years ago #

   Oops, maybe I should have read your post fully, I see now that you wanted the newly created posts to automatically reflect in the menu without having to manually add them to the code (Which is what the code I gave above cannot do). I actually use that code only as a categories drop down so I don;t have that issue. Maybe someone has the answer to your question...

4. particlepat
   Member
   Posted 2 years ago #

   No but this is better than anything else I've seen. No one seems to be very helpful with this issue. Thanks, I will use this code for now.

   Anyone else know how to code it with the php?

5. TransPersonal
   Member
   Posted 2 years ago #

   particlepat Try this:

   <ul id="navNew" class="dropdown dropdown-horizontal">
   <li id="n-shows"><a href="#">Pages</a>
   <ul>
   <li><?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?></li>
   </ul>
   </li>
   </ul>
   </ul>
   
   </ul>

   Keep the CSS the same.

Topic Closed

This topic has been closed to new replies.