Theming <ul> into <div>
stempy - March 2, 2007 - 23:31
Hi All,
I am trying to theme the menu tree's (Drupal 5) from <ul><li> based lists into <div> blocks.
Based on opencube quickmenu (http://www.opencube.com/index.html)
For example, desired output:
<div id="menu" class="amenu">
<a href="#">Home</a>
<a href="#">Main Nav1</a>
<div>
<a href="">Sub 1</a>
<a href="">Sub 2</a>
</div>
</div>I have themed the menu_tree in menu_tree.tpl.php like so:
<?php if ($tree = menu_tree($pid)) : ?>
<div><?php print $tree ?></div>
<?php endif; ?>and menu_item in menu_item.tpl.php:
<?php print (menu_item_link($mid) . $children); ?><?php print "\n" ?>This generates the following html block:
<ul class="menu">
<a href="/?q=node/4" title="Home Page">Home</a>
<a href="/?q=node/66" title="Item" class="active">Main Nav</a>
<div>
<a href="/?q=node/66" class="active">Sub 1</a>
<a href="/?q=node/73">Sub 2</a>
</div>
</ul>so it generates the submenu's correctly with the div, however the root menu element is still using <ul class="menu"%gt;, I need to change this to generate <div id="anid" class="aclass">, I am wondering if there is another item that needs to be themed for the root element, or some other way of doing it.
theme overrides
You may have to do some theme overrides.
See http://drupal.org/node/55126
Then find the functions at http://api.drupal.org/apis/5/theme_menu
--
http://ken.blufftontoday.com/
http://new.savannahnow.com/user/2
Search first, ask good questions later.
Why?
Using CSS, you can turn any UL and LI into a generic, border-less, bullet-less, margin and padding-less block-level element. The UL's are much friendlier to search engines and screen readers.
--
If you have a problem, please search before posting a question.
True
Probably trying it because the OpenCube source uses DIVs?
I didn't think about the why behind the question, just the how.
--
http://ken.blufftontoday.com/
http://new.savannahnow.com/user/2
Search first, ask good questions later.
Thank you
Thanks agentrickard, yes that's it. I've overriden the menu_tree function, however I need to find out if the current container is the root of the menu or a submenu.
Is there some variable or function call to determine the containers depth.
LI vs DIVs
Yes I realize what can be done with the UL, LI's, however the menu is based upon opencubes quickmenu as I stated above, which is a DIV based structure.
I managed to override the menu theming with menu_tree which provides the containers, trouble is, all submenu's have exact same <div id="bla" class="blah"> which is meant for the root element like so.
<div id="menu" class="menuclass"><a href="#">Main Nav1</a>
<div id="menu" class="menuclass">
<a href="#">Sub 1</a>
<a href="#">Sub 2</a>
</div>
<a href="#">Main Nav2</a>
<a href="#">Main Nav3</a>
</div>
I just need to determine in the menu_tree.tpl.php override if the container is the root menu, or submenu, so all submenu containers are just <div> without the id and class attributes.
Desired outcome:
<div id="menu" class="menuclass"><a href="#">Main Nav1</a>
<div>
<a href="#">Sub 1</a>
<a href="#">Sub 2</a>
</div>
<a href="#">Main Nav2</a>
<a href="#">Main Nav3</a>
</div>
Theme_menu_item?
http://api.drupal.org/api/5/function/theme_menu_item
Step through and check the $leaf variable, I presume.
--
http://ken.blufftontoday.com/
http://new.savannahnow.com/user/2
Search first, ask good questions later.
Leaf
I've tried the leaf variable for menu_item, however that does not show if it's a root menu item or submenu, as items on the root have the same value as submenu items(not all but some, where it comes from I am unaware...
Resolved?
I've tried to do the same thing in Joomla. I was wondering if you'd figured it out?
I think I've got it
I'm brand new to drupal, so this may not be the right way to do it, but it works for 2 level deep menus. I'm sure it wouldn't be difficult to make it work on variable depth menus.
template.php
<?phpfunction phptemplate_menu_tree($pid = 1, $all = FALSE) {
return _phptemplate_callback('menu_tree', array('pid' => $pid, 'all' => $all));
}
?>
menu_tree.tpl.php
<?php
$menu = menu_get_menu();
$output = '';
if (isset($menu['visible'][$pid]) && $menu['visible'][$pid]['children']) {
foreach ($menu['visible'][$pid]['children'] as $mid) {
$type = isset($menu['visible'][$mid]['type']) ? $menu['visible'][$mid]['type'] : NULL;
$children = isset($menu['visible'][$mid]['children']) ? $menu['visible'][$mid]['children'] : NULL;
if (count($children) > 0)
{
$output .= menu_item_link($mid) ;
$output .= '<div>';
foreach($children as $cid)
$output .= menu_item_link($cid) ;
$output .= '</div>';
}
else
$output .= menu_item_link($mid) ;
}
}
echo $output;
?>
I've tried putting in \n characters in the $output but for some reason they display literally. Any ideas?
Alex