+ Menu: graphical menu

Please be aware that graphical menus won't work if ImageMagick isn't installed on the web server which hosts your TYPO3 website. These types of menus are also removed from TYPO3 v10.

To make this type of menu work properly in IE, you'll have to edit a file in the source code of TYPO3. This file is typo3/sysext/cms/tslib/media/scripts/gmenu_layers.php. Scroll down to line 242 and remove 'style="width:100%; height:100%;"'.

The typoscript for GMENU is almost the same as GMENU_LAYERS, but the second part is removed, and GMENU_LAYERS is replaced with HMENU. Some properties used with GMENU_LAYERS won't work.

# this line can also be included in the typoscript template
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php

# Menu 1 cObject

lib.headermenu = COA
#lib.headermenu.10 = TEXT
#lib.headermenu.10.value = lala
lib.headermenu.20 = HMENU
# First level menu-object, textual

lib.headermenu.20.1 = GMENU
lib.headermenu.20.1 {
   wrap = <div class="headermenu menu_ul"><ul>|</ul></div>
   layerStyle = position:absolute;visibility:hidden;text-align:left;
   topOffset = 31
   leftOffset = 0
   lockPosition = x
   dontFollowMouse = 1
layer_menu_id=mainnav
#layer_menu_id necessary to avoid typo3temp js bug

   # Normal state properties
   NO {
       allWrap = <li><div class="li_headermenu">|</div></li>
       #stdWrap.htmlSpecialChars = 1
       5 = IMAGE
       5.file = fileadmin/templates/images/menu_bar_center_no.gif
       10 = TEXT
       10.text.field = title
       10.fontColor = #a0a0a0
       #offset = left,top
       10.offset = 10,24
       10.fontFile = fileadmin/templates/fonts/BaroqueScript.ttf
       10.fontSize = 10

       #XY = width,height
       XY = [10.w]+20,30
   }
   RO < .NO
   RO = 1
   RO {
       #5 = IMAGE
       #5.file = fileadmin/templates/images/menu_bar_center_ro.gif
       #10.fontColor = #FFB400
       10.fontColor = #ffffff
   }
   ACT < .RO
}

Next, notes on the use of GMENU_LAYERS and TMENU_LAYERS ->

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.