Support » Fixing WordPress » Dropdown menu without plugin

  • 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?

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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:;
    }

    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…

    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?

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dropdown menu without plugin’ is closed to new replies.