Community & Support
Support » Theme development

Theming <ul> into <div>

Posted by stempy on March 2, 2007 at 11:31pm

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.

Login or register to post comments ⋅ Categories: ,

Comments

theme overrides

Posted by agentrickard on March 3, 2007 at 2:16am

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.

--
http://ken.therickards.com

Why?

Posted by Steven on March 3, 2007 at 3:00am

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.

--
If you have a problem, please search before posting a question.

True

Posted by agentrickard on March 3, 2007 at 3:45am

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.

--
http://ken.therickards.com

Thank you

Posted by stempy on March 3, 2007 at 4:30am

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

Posted by stempy on March 3, 2007 at 4:11am

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?

Posted by agentrickard on March 3, 2007 at 2:00pm

http://api.drupal.org/api/5/function/theme_menu_item

Parameters

$mid The menu id of the item.

$children A string containing any rendered child items of this menu.

$leaf A boolean indicating whether this menu item is a leaf.

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.

--
http://ken.therickards.com

Leaf

Posted by stempy on March 5, 2007 at 3:17am

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?

Posted by adewinne on July 7, 2007 at 7:45pm

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

Posted by adewinne on July 25, 2007 at 10:31pm

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

<?php
function 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

nobody click here