如何输出为标签导航构建的菜单?

时间:2013-11-25 作者:Hexodus

我已经为我的网页设计了一个带有两个级别的选项卡式导航。在本例中,选择了“TAB2”选项卡,其子项显示在其下方。

                      ˬ
          |TAB1|    |TAB2|    |TAB3|               
 tab2-item1    tab2-item2    tab2-item3ˬ   tab2-item4 ...
我能找到的唯一一个使用Similar的网页真的很过时,但总体上显示了我想要的东西。sample webpage (not mine)

我想我需要以下html结构来实现这一点-使用引导程序:

 //Bootstrap 2.32 nav tabs
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">TAB 1</a></li>
    <li><a href="#tab2" data-toggle="tab">TAB 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <ul>
        <li>tab1-item1</li>
        <li>tab1-item2</li>
        <li>tab1-item3</li>
      </ul>
    </div>
    <div class="tab-pane" id="tab2">
      <ul>
        <li>tab2-item1</li>
        <li>tab2-item2</li>
        <li>tab2-item3</li>
        <li>tab2-item4</li>
      </ul>
    </div>
  </div>
以这种格式打印菜单的最佳方式是什么?

1 个回复
SO网友:Hexodus

多么卑鄙,没人回应。我费了好大劲才先检查了walker的课程,才发现wp_get_nav_menu_items()

这就是我想到的。虽然不完美,但它可以工作(只有两个级别,对我的页面来说足够了)。

$menu_name = \'primary\';

if ( (  $locations = get_nav_menu_locations()  ) && isset( $locations[ $menu_name ] ) ) 
{
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);

foreach ( (array) $menu_items as $key => $menu_item ) 
{
    $title = $menu_item->title;
    $url = $menu_item->url;
    $curr_item_parent = $menu_item->menu_item_parent;
    $curr_item_id = $menu_item->db_id; 

    if($curr_item_parent)
    {
        $sub_list[$curr_item_parent][] = array(\'title\' => $title, \'url\' => $url, \'id\' =>$curr_item_id, \'parent_id\' => $curr_item_parent);
        $parent_list[] = $curr_item_parent;
    }
    else
    {
        $tab_list[] = array(\'title\' => $title, \'url\' => $url, \'id\' =>$curr_item_id);
        $toplevel_list[] = $curr_item_id;
    }
        $complete_list[] = $curr_item_id;
    }
}

$parentless_list = array_diff ($toplevel_list, array_unique($parent_list)); 

var_dump($parentless_list);

$menu_output .="<ul class=\'nav nav-tabs\'>";

foreach($tab_list as $tab)
{
    $tab = (object)$tab;
    $menu_output .="<li class=\'\'><a href=\'#{$tab->id}\' data-toggle=\'tab\'>{$tab->title}</a></li>";
}

$menu_output .= "</ul>";
$menu_output .= "<div class=\'tab-content\'>";

    foreach($sub_list as $key=>$sub_array)
    {
        $menu_output .= "<div class=\'tab-pane\' id=\'{$key}\'>";

        foreach($sub_array as $sub)
        {
            $sub = (object)$sub;
            $menu_output .="<li class=\'\'><a href=\'#{$sub->url}\' data-toggle=\'tab\'>{$sub->title}</a></li>";
        }

        $menu_output .= "</div>";

    foreach($parentless_list as $dummy_item)
    {
        $menu_output .= "<div class=\'tab-pane\' id=\'{$dummy_item}\'></div>";
    }

}

$menu_output .= "</div>";

echo $menu_output;

结束

相关推荐

Wordpress Navigation

我的菜单html代码如下:<div class=\"menu\"> <ul> <li><a href=\"index.php\" >Home</a></li> <li><a href=\"aboutus.php\" >About Us</a></li> <li><a href=\