Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've got a design for my webpage that uses tabbed navigation with two levels. In this example 'TAB2' tab is selected and it's children item are desplayed below of it.

                      ˬ
          |TAB1|    |TAB2|    |TAB3|               
 tab2-item1    tab2-item2    tab2-item3ˬ   tab2-item4 ...

The only webpage I could find that uses something simmilar is really old fashioned but shows what I want in general. sample webpage (not mine)

I think that I need the following html structure for this - using bootstrap:

 //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>

What is the best way to print the menue out in this format?

share|improve this question
add comment

1 Answer

What a pitty that nobody responded. I had a hard way checking the walker class first before I found out that it'll be much easier with wp_get_nav_menu_items()

This is what I came up with. Not perfect but it works (only two levels which is enought for my page).

$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;
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.