WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Making a horizontal navigation bar based on information from wp_list_pages? (4 posts)

  1. SchuminWeb
    Member
    Posted 1 year ago #

    So I'm trying to add a horizontal navigation bar with drop-downs, etc. based on the wp_list_pages function to my custom theme. I am looking to make this a native feature of my theme rather than using a plugin, because all of the various plugins that I've tried have been less than satisfactory.

    I have been unable to find any documentation anywhere about how to build a menu based on this. That brings me to a more fundamental question: is it even possible to build a navbar using this function as a base? I'm really at a loss...

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You can build a nav bar with wp_nav_menu() (outputs HTML).

    You will need to style the HTML if not already.

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    before the introduction of wp_nav_menu() in wp3.0 , all page menus were build on wp_list_pages();
    http://codex.wordpress.org/Function_Reference/wp_list_pages
    http://codex.wordpress.org/Creating_Horizontal_Menus

    basic code, for instance:

    <div id="page_nav">
    <ul>
    <?php wp_list_pages('title_li=' ); ?>
    </ul>
    </div>

    some css for this (from an old test theme based on the 'kubrick default' theme):

    #page_nav { margin:2px 20px 2px 20px; float:left; background-color: #eee; width:1040px; }
    
    #page_nav ul {
      float: left;
      margin:0;
      padding-left: 0;
      }
    
    #page_nav ul li {
      float: left;
      margin:0;
      padding-left: 0;
      list-style-type:none;
      }
    
    #page_nav a {
      display:block;
      padding-top: 7px;
      padding-bottom: 5px;
      padding-left:10px;
      padding-right:10px;
      text-decoration: none;
      border-right: 1px solid #777;
      background:#eee;
      color:#000066;
      font-size:120%;
      margin: 0;
      }
    
    #page_nav a:hover {
      background: #ccc;
      color:#000099;
      }
    
    #page_nav li { position: relative; }
    
    #page_nav ul ul ul {
      position: absolute;
      top: 0;
      left: 120px; /* should be 20px wider than width in '#page_nav ul ul a ' below */
      z-index:600;
    }  
    
    #page_nav ul ul {
      position: absolute;
      z-index: 500;
      top: 25px;
      left: 0px;
    }
    
    #page_nav ul ul a { background: #ddd;
      width: 100px; /* fixed width fold-out */
      }
    
    #page_nav ul ul {
      display: none;
    }
    
    #page_nav ul li:hover ul
    {display: block;}
    
    #page_nav ul ul,
    #page_nav ul li:hover ul ul,
    #page_nav ul ul li:hover ul ul
    {display: none;}
    
    #page_nav ul li:hover ul,
    #page_nav ul ul li:hover ul,
    #page_nav ul ul ul li:hover ul
    {display: block; }
    
    #page_nav ul li.current_page_item a {
      background-color: #ddd; color: #000;
    }
  4. SchuminWeb
    Member
    Posted 1 year ago #

    That's awesome, thank you very much! I believe that I can build on this from here. Greatly appreciated!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.