Home > Tip & Trik > [Drupal] Mengubah tampilan menu local task dari tabs menjadi dropdown

[Drupal] Mengubah tampilan menu local task dari tabs menjadi dropdown

Postingan singkat tentang drupal secara teknis. Materi kali ini adalah tentang mengubah tampilan menu local task yang biasanya berupa tabs diubah menjadi dropdown.

Tampilan awalnya adalah seperti gambar berikut:

Menu local menggunakan tabs.

Kode untuk mengubah tampilan tersebut menjadi dropdown adalah sebagai berikut:

function MYTHEME_menu_local_tasks(&$variables) {
  $output = '';

  if (!empty($variables['primary'])) {
      $primary_link = t('Set-Up');
      foreach ($variables['primary'] as $item) {
        if (isset($item['#active']))
          $primary_link = $item['#link']['title'];
      }

      $variables['primary']['#prefix'] = '<div class="row">';
      $variables['primary']['#prefix'] = '<ul class="nav nav-tabs">';
      $variables['primary']['#prefix'] .= ' <li class="dropdown">';
      $variables['primary']['#prefix'] .= '<a class="dropdown-toggle" data-toggle="dropdown" href="#">' 
						  . $primary_link . '<span class="caret"></span></a>';
      $variables['primary']['#prefix'] .= '<ul class="dropdown-menu" role="menu">';
      $variables['primary']['#suffix'] = '</ul>';
      $variables['primary']['#suffix'] .= '</li>';
      $variables['primary']['#suffix'] .= '</div>';
      $output .= drupal_render($variables['primary']);
    }

    if (!empty($variables['secondary'])) {
      $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>';
      $variables['secondary']['#prefix'] .= '<ul class="tabs--secondary pagination pagination-sm">';
      $variables['secondary']['#suffix'] = '</ul>';
      $output .= drupal_render($variables['secondary']);
    }
  }

  return $output;
}

Kode diatas harus dimasukkan dalam file template.php dari theme yang sekarang aktif. Jangan lupa ganti MYTHEME menjadi nama theme yang sekarang aktif. Dari contoh diatas, saya hanya mengubah pada primary menu local task, sedangkan untuk secondary menu local task saya biarkan seperti aslinya.

Oh iya, theme yang saya gunakan berbasis twitter bootstrap, jadi saya menggunakan class-class dari bootstrap untuk menampilkan dropdown menu.

Hasil dari coding diatas adalah sebagai berikut:

Menu local dalam dropdown

Mudah bukan?

You may also like
Drupal: Bulk Insert
Ciyeee, Drupal dan WordPress minta update barengan.
Membuat Chart di Excel menggunakan Drupal
Tabulasi data menggunakan views pada Drupal 7

27 Responses