tt_news

1.3.9. The category menu (CATMENU)

By choosing the code CATMENU in the tt_news content element or by TS a category selector will be displayed which shows nested categories in a hierarchical menu.

The catmenu can work in 2 different modes:

1. tree (default): The category menu will be rendered like the categories in BE fields. The shown "tree" is build by images and can show userdefinded icons.

2. nestedWraps: This mode will render a category menu where each level has its onwn wrap.

in both modes the content of the field "description" will be filled to the "alt" and "title" attributes of the catselector link so it appears as tooltip when the mouse pointer is over it. If this is not wanted it can be disabled by setting "displayCatMenu.insertDescrAsTitle" to 1.

The wraps for the complete catmenu, for the menu states (NO and ACT) and for the header of the catmenu are also used in both modes.

The CSS styles for all category menus are included in the static TS template  "default CSS styles (tt_news)". If you're using the "table based" template for tt_news you'll have to include the CSS styles manually.  

mode "tree"

The tree mode has some special options for configuring the icons. The option  "catmenuIconMode" configures the behaviour of the icons showing left to the category titles.  "catmenuIconMode" offers the following options:

1. -1 = display no icons at all

2. 0 = display the default icon (tt_news_cat.gif)

3. 1 = display image from category record as icon

4. 2 = display the icon which is configured as  "catmenuIconFile"  (default: EXT:tt_news/res/arrow.gif)

The icon for the "root" item of the tree (the catmenu header) can be configured separately ("catmenuRootIconFile") or completely disabled by seetting "catmenuNoRootIcon" to 1.

The sizes for the normal icons in catmenuIconMode "1" and "2" and for the root icon can be configured separately.

Example:

TypoScript setup for a "catmenu" content element that looks like this:

  plugin.tt_news {

    displayCatMenu {

      # select root icon file

      catmenuRootIconFile = EXT:tt_news/res/tt_news_cat.gif

      # enable root icon

      catmenuNoRootIcon = 0

      # disable other icons

      catmenuIconMode = -1

    }

  }

All other settings are included in the default TS templates (see Section "Reference" for details)

mode "nestedWraps"

In this mode each level of the "catmenu" has its own wrap. 1 is the first level.

Example:

TypoScript setup for a "catmenu" in mode "nestedWraps":

  plugin.tt_news {

    displayCatMenu {

      mode = nestedWraps

      # wrap for the complete "catmenu"

      catmenu_stdWrap.wrap = <div class="news-catmenu">|</div>

      # wraps for active or inactive category links in the tree

      catmenuItem_ACT_stdWrap.wrap = <img src="tslib/media/bullets/bullet1_h.gif" />|

      catmenuItem_NO_stdWrap.wrap = <img src="tslib/media/bullets/bullet1_n.gif" />|

      # wrap for level "n"

      catmenuLevel1_stdWrap.wrap = <div class="level1">|</div>

      catmenuLevel2_stdWrap.wrap = <div class="level2">|</div>

      catmenuLevel3_stdWrap.wrap = <div class="level3">|</div>

      catmenuLevel4_stdWrap.wrap = <div class="level4">|</div>

    }

  }

After adding the CSS styles below to your website the catmenu could look like this:

CSS Styles:

  .news-catmenu  {

     padding:5px 0px 0px 5px;

     margin:10px;

     border:1px solid #666;

     background-color:#F9FFE5;

  }

  .news-catmenu DIV IMG {

     margin:0px;

     padding: 0px 3px 3px 0px;

     vertical-align: middle;

  }

Hint: With a function hook in the tt_news class ("userDisplayCatmenuHook") It's possible to add a userdefined script that renders the "catmenu".