glFusion Wiki

Site Tools


glfusion:upgrade:menu-builder-140

Menu Builder Updates in glFusion v1.4.0

Menu Builder has gone through another major update with glFusion v1.4.0. The menu rendering code has been rewritten from scratch, which is now much more efficient that previous versions. The internal menu generation code has also been consolidated, which has removed a lot of duplicate code throughout the system.

A more important design change is that the HTML that formats menus is no longer hard coded in the system. Instead, all menus are now template driven, allowing you complete control over how they are styled and what HTML is used to build them.

All of the old 'configuration driven' menu code (and corresponding configuration elements) have been removed. Menu Builder is now the only method to create menus in glFusion.

The HTML that builds the menus is now template driven. There are 4 primary templates:

  • menu_horizontal_cascading.thtml
  • menu_horizontal_simple.thtml
  • menu_vertical_cascading.thtml
  • menu_vertical_simple.thtml

If there is any JavaScript required to animate the menu, it should be embedded in the template file.

Custom Templates

You can create a custom template per menu by copying the appropriate base template file (see above) to the public_html/layout/themename/menu/custom directory and appending the menuname. Like this:

menu_horizontal_cascading_menuname.thtml

Styling

All styles are handled via the style sheet. There are 4 primary styles in the base style sheet:

  • .menu-horizontal-cascading
  • .menu-vertical-cascading
  • .menu-horizontal-simple
  • .menu-vertical-simple

Each menu is wrapped in a <div></div> with an id of menu_menuname, where menuname is the name of the menu. This allows you to have specific styles that will only affect a specific menu. For example, let's say you want to change the text color for a specific horizontal simple menu, you could add the following style to your custom style sheet:

#menu_footer .menu-horizontal-simple {
    color:              #3677c0;
}

The color style will only be applied to the menu named footer.

PHP Menus

There is a menu type called PHP, this calls a function which much return an array of arrays that contain:

      array( 
        array(
          'label' => 'menu label here',
          'url'   => 'menu url here,
          'children' => NULL if no children, otherwise an array of children menu elements
        ),
        array(
          'label' => 'menu label here',
          'url'   => 'menu url here,
          'children' => NULL if no children, otherwise an array of children menu elements
        ),
        ...          
      );
                           

The menu class will then parse this returned array and create the appropriate menu elements.

Template Changes

Modified the template variable names for menus used in the header.thtml and footer.thtml

Old Variable Name New Variable Name
st_hmenu menu_navigation
st_footer_menu menu_footer
st_header_menu menu_header

Legacy Menu

Removed all legacy menu items - config entries, code in lib-common and menu_elements template variable.

glfusion/upgrade/menu-builder-140.txt · Last modified: 2017/04/12 21:12 (external edit)

Page Tools