History

Horizontal slideout navigation with FreeStyle Menus

This tutorial shows how to natively implement FreeStyle Menus from TwinHelix into TYPOlight. The script is available from "and it is important that the license agreement is adhered to. This tutorial is a compilation of all tips and discussion posted in this thread of the TYPOlight forum - http://www.typolight.org/forum/message/11957.html.

Setting up the script

  1. Proceed to http://www.twinhelix.com/dhtml/fsmenu and follow the instructions to download the script http://www.twinhelix.com/dhtml/fsmenu.
  2. Unpack all of the files to your local computer.
  3. Open fsmenu.js and do a find / replace, where "addEvent" is replaced with "fsmAddEvent". Then, search for "fsmAddEventListener" and replace it with "addEventListener".
  4. Upload all FSMenu files into your TYPOlight installation folder /tl_files/scripts/fsmenu (The path is arbitrary, but will be used as an example.)

Update the navigation template

  1. From the backend of TYPOlight, go to Layout > Templates
  2. From the "Original templates" dropdown, select "nav_default.tpl" and click "Create template"
  3. Click the "Edit source" icon for this new template
  4. Replace the existing code with what is listed below and save the changes
 1 <?php if ($this->level=="level_1"): ?>
 2 <?php if ($this->type == 'mod_navigation'): ?>
 3 <ul class="menulist" id="listMenuRoot">
 4 <?php else: ?>
 5 <ul class="menulist" id="listMenuRoot">
 6 <?php endif;?>
 7 <?php else: ?>
 8 <ul class="<?php echo $this->level; ?>">
 9 <?php endif;?>
10 <?php foreach ($this->items as $item): ?>
11 <?php if ($item['isActive']): ?>
12 <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; endif; ?>"><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != _): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
13 <?php else: ?>
14 <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != _): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
15 <?php endif; endforeach; ?>
16 </ul>

Fix minor conflicts with TYPOlight

  1. Open /system/typolight.css
  2. Change the following line (probably at line 11)
1 .inside { position:relative; text-align:left; }

to be

1 .inside { /* position:relative; */ text-align:left; }

This fixes an issue where the pop-up menu is hidden in Internet Explorer under #main layer, but not in FireFox.

  1. Change the following line (probably at line 14)
1 .block { overflow:hidden; }

to be

1 /*.block { overflow:hidden; }*/

Without this change a popup window from menu is hidden. Maybe there are other ways that prevent this problem, although this solution works fine. It is important to realize that this change may be overwritten upon updating TYPOlight to a new version.

As an alternative to making these changes in typolight.css, you can override them by adding the following selectors to a style sheet used on the pages that have FSMenu:

1 .block {overflow:visible !important;}
2 .inside {position:static !important;}

Insert additional head tags

From the TYPOlight backend go to Layout > Page layouts and add the following in "Additional <head> tags":

1 <script type="text/javascript" src="tl_files/scripts/fsmenu/fsmenu.js"></script>
2 <script type="text/javascript" src="tl_files/scripts/fsmenu/fsmenu_data.js"></script>
3 <link rel="stylesheet" type="text/css" id="listmenu-h"  href="tl_files/scripts/fsmenu/listmenu_h.css" title="Horizontal 'Earth'" />

Setup the navigation module

  1. From the TYPOlight backend go to Layout > Page layouts
  2. Create a new module named "navigation - dropdown" with a Module type of "Navigation menu"
  3. Insert this module in your Page layout

Additional Resources

There is a discussion thread regarding the implementation of FreeStyle Menus in TYPOlight at http://www.typolight.org/forum/topic/2026.html.

Also available in: HTML TXT