WordPress.org

Ready to get started?Download WordPress

Forums

Dropdown menu without plugin (5 posts)

  1. particlepat
    Member
    Posted 5 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 5 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 5 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 5 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 5 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.

About this Topic