By rjleigh on

I'm trying to create a custom menus with main menu items and children formatted differently, like this:

Main-level Item1

  Sub-level Item1
  Sub-level Item2

Main-level Item2

  Sub-level Item1
  Sub-level Item2
  Sub-level Item3
  Sub-level Item4

Main-level Item3

  Sub-level Item1
  Sub-level Item2

The standard menu output does not seem to have enough differentiation in class/id coding to accomplish this (unless I'm missing something there - If only IE supported named children in the cascade!).

I guess I could patch the module that creates the nested UL entries to add a differentiator, but I hate to change core stuff if it can be done in the template (or block code?).

I understand how to access the primary and secondary menus in an array, but how can you access a custom (admin-created) menu?

⋅ Categories: Drupal 4.7.x

Comments

narres’s picture

narres commented

This is used by the PHP-Template-engine and you can do customizing with functions like:

/********************************************/
function phptemplate_menu_tree($pid = 1) {
  if ($tree = menu_tree($pid)) {
    $output .= "<ul class=\"menu-tree\">";
    $output .= $tree;
    $output .= "</ul>";
    return $output;
  }
}
/********************************************/
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
  //return '<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. menu_item_link($mid) . $children ."</li>\n";
  return '<li>'. menu_item_link($mid) . $children ."</li>";
}

Then you are able to use:

ul.menu-tree {
        background: #EEE;
        margin: 0;
        padding: 0;
}
ul.menu-tree li li {
        list-style-type: square;
        margin-left: 15px;
}
ul.menu-tree li li li {
        list-style-type: circle;
        margin-left: 15px;
}
.menu-tree a:link, .menu-tree a:visited {
        background: #A20 left;
        color: #FFF;
        display: block;
        margin: 0 0 1px 0;
        padding: 5px 0 5px 10px;
        text-decoration: none;
/*        text-transform: capitalize; */
}
.menu-tree a:hover {
        background: #910 no-repeat center left;
        color: #FFFFFF;
}
.menu-tree li {
        list-style-type: none;
}

in your style.css

Have a look at "Internet Jobs Theme" (http://drupal.org/node/50119) for a working example.

Thomas Narres
Keep the sunny side up