Language
Horizontal tree-like menus in Pixel Clever Tutorials
Submitted by rpinkham on Tue, 02/17/2009 - 02:53
I would like to implement a menu system like the one in the top block of the main column in the Pixel Clever tutorials section, in which two horizontal menus at the bottom of the block seem to do duty for a menu tree, with the selected results (taxonomies?) being displayed on the blue menu bar at the top.
This is really great work in my humble opinion. If any how-to sharing is possible and appropriate, I would be most appreciative.
Recent Drupal Questions
Recent blog posts
- How to turn off Vertical Tabs for a specific content type
- How to set up Drush for a multisite installation
- How to handle a multisite installation with Mamp (using symlinks and virtual servers)
- How to move an existing site from one svn repository to a new one
- Mac OSX + Drush = Time saved
- Firefox search plugins for Drupal.org, Drupal API and Pixel Clever.com
- New to Drupal? A word from the wise: Never say newbie!
- Is the Adobe cs4 suite worth the upgrade?
- Thoughts for module maintainers regarding the Drupal upgrade cycle
- Let’s set the record straight: Safari is NOT the world’s best browser
Making use of the Arguments in Views
That particular tabbed menu at http://www.PixelClever.com/drupal-tutorials was done with function in the template.php file that I called in the header of the view itself like so:
print tutorial_links();
?>
The function in the template.php looks as follows:
$options = array(
'attributes' => array (
'class' => 'active',
),
);
global $base_url;
$path = $base_url . '/';
$current = arg(0);
if (arg(1)) {
$one = arg(1);
}
else {
$one = 'all';
}
if (arg(2)) {
$two = arg(2);
}
else {
$two = 'all';
}
$output .= '<div id="tabsection">';
$output .= '<div class="tabwrap-1">';
$output .= '<div class="clearer"></div>';
$output .= '<ul class="tabs local-primary">';
if (arg(2) == 2) {
$output .= '<li class="active">' . l(t('Drupal Administration'), $path . $current . '/' . $one . '/2', $options) . '</li>';
}
else {
$output .= '<li>' . l(t('Drupal Administration'), $path . $current . '/' . $one . '/2') . '</li>';
}
if (arg(2) == 3) {
$output .= '<li class="active">' . l(t('Drupal Theming'), $path . $current . '/' . $one . '/3', $options) . '</li>';
}
else {
$output .= '<li>' . l(t('Drupal Theming'), $path . $current . '/' . $one . '/3') . '</li>';
}
if (arg(2) == 4) {
$output .= '<li class="active">' . l(t('Drupal Module Development'), $path . $current . '/' . $one . '/4', $options) . '</li>';
}
else {
$output .= '<li>' . l(t('Drupal Module Development'), $path . $current . '/' . $one . '/4') . '</li>';
}
$arg2 = arg(2);
if ((arg(2) == 'all') || empty($arg2)) {
$output .= '<li class="active">' . l(t('All Subjects'), $path . $current . '/' . $one . '/all', $options) . '</li>';
}
else {
$output .= '<li>' . l(t('All Subjects'), $path . $current . '/' . $one . '/all') . '</li>';
}
$output .= '</ul>';
$output .= '</div>'; // End tabwrap-1
$output .= '<div class="tabwrap-2">';
$output .= '<div class="clearer"></div>';
$output .= '<ul class="tabs local-secondary">';
if (arg(1) == 5) {
$output .= '<li class="active">' . l(t('Basic'), $path . $current . '/5/' . $two , $options) .'</li>';
}
else {
$output .= '<li>' . l(t('Basic'), $path . $current . '/5/' . $two ) . '</li>';
}
if (arg(1) == 6) {
$output .= '<li class="active">' . l(t('Intermediate'), $path . $current . '/6/' . $two , $options) .'</li>';
}
else {
$output .= '<li>' . l(t('Intermediate'), $path . $current . '/6/' . $two ) . '</li>';
}
if (arg(1) == 7) {
$output .= '<li class="active">' . l(t('Advanced'), $path . $current . '/7/' . $two , $options) . '</li>';
}
else {
$output .= '<li>' . l(t('Advanced'), $path . $current . '/7/' . $two ) . '</li>' ;
}
$arg1 = arg(1);
if ((arg(1) == 'all') || empty($arg1)) {
$output .= '<li class="active">' . l(t('All Levels'), $path . $current . '/all/' . $two, $options) . '</li>' ;
}
else {
$output .= '<li>' . l(t('All Levels'), $path . $current . '/all/' . $two ) . '</li>' ;
}
$output .= '</ul>';
$output .= '<div class="clearer"></div>';
$output .= '</div>'; // End tabwrap-2
$output .= '</div>'; // End tabsection
return $output;
}
The view for that page accepts two arguments one a term id (tid) from one vocabulary, another a tid from a different category. The main trick here is that the links themselves are made to change where they link to depending on which category the user is currently viewing. This is achieved by calling the arg() function. Since I knew that the arguments in question were arguments 1 and 2 I got the values for those arguments with arg(1) and arg(2). If the argument was listed as "all" (which is the wildcard for that view) then all is inserted into the link.
The tabs themselves make use of the same html and CSS as the normal tabs on the site to avoid double coding.
Thanks for the help
Thanks Aaron,
I appreciate that someone with your talent has taken the time to share some of your knowledge.
-Robert
Post new comment