Posted by nabilomar on January 4, 2013 at 12:45am
Hey everybody, currently I am in the process of designing a theme for a client based on Zurb Foundation ,
I am totally a beginner, After two days of research I have created a Mega Menu base on zurb doc
http://foundation.zurb.com/docs/navigation.php
Though of Sharing, Maybe someone need a similar one, I know there are modules for Mega Menu, i hadn't used just because I wanted the menu
to match with the Zurb Foundation way.
The code I have added to template.php is as following :
function themename_menu_link(array $variables) {
// Remove Drupal attributes
unset($variables['element']['#attributes']['class']);
$element = $variables['element'];
$sub_menu = '';
$subsub_menu = '';
if ($element['#below']) {
// Ad our own wrapper
unset($element['#below']['#theme_wrappers']);
if($element['#original_link']['depth'] == 1) {
$sub_menu = '<div class="flyout large"><div class="row"><div class="twelve columns">' . drupal_render($element['#below']) . '</div></div></div>';
}
// Check if this element is nested within another
if ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] > 1)) {
$subsub_menu = '<ol class="square">' . drupal_render($element['#below']) . '</ol>';
}
else {
// Generate as standard dropdown
$element['#attributes']['class'][] = 'has-flyout';
$element['#localized_options']['html'] = TRUE;
$element['#title'] .= '<a href="#" class="flyout-toggle"><span> </span></a>';
}
}
$output = l($element['#title'] , $element['#href'], $element['#localized_options']);
if($element['#original_link']['depth'] == 2) {
return '<div class="six columns"><h6 class="subheader"' . drupal_attributes($element['#attributes']) . '>' . $element['#title'] . $sub_menu . '</h6>' . $subsub_menu .'</div>' ;
}
else {
return '<li ' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
}Then I wrap it into <ul class="nav-bar"></ul>
This will generate a mega menu , first nested element will act as headers , second will be list of links