.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ================== Drop-Down Site Map ================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Jean-David Gadina :Changed: 2008-06-11T14:38:22 :Author: Jean-David Gadina / macmade.net :Email: info@macmade.net :Info 3: :Info 4: .. _Drop-Down-Site-Map: Drop-Down Site Map ================== Extension Key: **dropdown\_sitemap** Copyright 2000-2002, Jean-David Gadina / macmade.net, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.com .. _Table-of-Contents: Table of Contents ----------------- **Drop-Down Site Map 1** **Introduction 1** What does it do? 1 Compatibility notice 1 Screenshots 2 **Users manual 2** Installation 2 Usage 3 Update 5 **Administration 7** **Configuration 8** Reference 8 **Tutorial 9** CSS styling 9 **Known problems 11** **To-Do list 11** **Changelog 11** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ The Drop-Down sitemap plugin adds a new kind of menu/sitemap to the Typo3 content elements. It uses HTML list elements, CSS and JavaScript (Scriptaculous or Mootools) to generate a drop-down map of the website, with the possibility to expand / collapse every section. **IMPORTANT NOTE: Be sure to read the update section of this manual if you're upgrading from an older version!** .. _Compatibility-notice: Compatibility notice ^^^^^^^^^^^^^^^^^^^^ Prior to version 3.0.0, the dropdown\_sitemap extension should run on any version of TYPO3, on PHP 4 and 5. Version 3.0.0 and later are designed exclusively for PHP 5.2 and TYPO3 4.2 (and greater). .. _Screenshots: Screenshots ^^^^^^^^^^^ Here's a screenshot of the frontend plugin. Pages that contains subpages appears as directories, that can be expanded when clicking on the icon. Spacer pages can be displayed, as well as a description for each page. The icons used in this plugin come from the «Silk Icon Set», designed by Mark James ( `http://www.famfamfam.com/lab/icons/silk/ `_ ) and are published under the Creative Commons Attribution 2.5 License. A big thanx to my friend Pascal ( `http://www.rdb5.ch/ `_ ) for his help on the look of the sitemap. |img-1| .. _Users-manual: Users manual ------------ .. _Installation: Installation ^^^^^^^^^^^^ The installation of this extension is very simple. Just connect to the Typo3 Extension Repository and download «Drop-Down Site Map» (dropdown\_sitemap), located in the frontend plugin section. Note that you will also need to download at least version 0.4.3 of the «Developer API» extension (api\_macmade), as it will be needed by the plugin. Once the extension is installed, you will need to include it's TypoScript configuration in your website's main template (like you probably did for the CSS Styled Content extension, for instance). |img-2| Then, on a page, just create a new content element, and choose «Drop- Down sitemap» from the wizard. |img-3| .. _Usage: Usage ^^^^^ The plugin uses flexforms for its configuration. The flexforms allow each instance of the plugin to be configured independently, whithout any TypoScript template. The first tab allow you to choose a starting point for the sitemap. If you leave this field blank, you'll get a sitemap of the whole website. If you want the sitemap to begin from a specific page, just click the folder icon to select a page. |img-4| On the second tab, you'll be able to configure pages related options. |img-5| For instance, you'll be able to decide if the page that are marked as «not in menu» will appear in the sitemap. You can also decide to display «spacer» pages, if you use them. You can also exclude specific pages from your website, as well as specific page types, if you don't want, for instance, to display the pages that are external links. Note that excluding a specific page will also prevent it's subpages to be displayed. The third tab contains the general options of the sitemap. |img-6| From here, you can decide how many levels to show in the sitemap, and how many levels should be expanded when viewing the page. You can also choose a specific field to be displayed as the link text. By default, it's the page title or the navigation title, if set. Finally, you can also choose to display the «expand / collapse all» link, at the top of the sitemap. The fourth tab contains parameters for the JavaScript effects. |img-7| By default, the plugin uses the Scriptaculous JS framework to creates nice effects, when expanding or collapsing a section, but you may also choose to use Mootools instead, or disable those effects. In such a case, a section will expand / collapse immediately. If you use the Scriptaculous effects, you may also choose which effect are used. The last tab contains some advanced settings, like the HTML list tag and type, as well as the targets for the links. |img-8| .. _Update: Update ^^^^^^ If you are upgrading from an old version of this plugin (below 1.2.0), you'll need to fix a few things in your database, in order to get the old instances of the plugin work. The new version of the Drop-Down Site Map plugin uses Typo3 flexforms for it's configuration. It allows independent settings for each plugin placed on a site. This is a major improvement. However, since the flexforms cannot be used with menu/sitemap content elements, the type of this plugin was changed. You won't see it anymore as a sitemap content elements, as it's now a list (insert plugin) content element. In order to update your database, go the extension manager, and click on the Drop-Down Site Map extension (dropdown\_sitemap). In the select menu, you'll see an update option. |img-9| If you don't see it, your database doesn't need to be updated. If it's present, click on it to see the list of the records which need an update. Please also note that a static TypoScript template is used since version 2.0.0. So if you update from an earlier version, you'll need to include it in your website's main template, as described in the installation section of this manual. Otherwise, your existing sitemaps won't be displayed at all. You'll find below some screenshots about the update process, from the extension manager. |img-10| Simply click on the update button to automatically change the type of those content elements. |img-11| Now you're done. All your previous records are now compatible with the new version of the extension. .. _Administration: Administration -------------- The whole configuration of the plugin is available through the constant editor. Please see the configuration section for more details about each option. Note that you won't be able to access those settings if the static TypoScript template is not included, as described in the installation section of this manual. |img-12| .. _Configuration: Configuration ------------- .. _Reference: Reference ^^^^^^^^^ Here's the complete reference of the TypoScript options for the plugin. Remember that you can set each one through the constant editor. .. ### BEGIN~OF~TABLE ### .. _picture-width: picture.width """"""""""""" .. container:: table-row Property picture.width Data type int+ Description The width of the icons. Default 16 .. _picture-height: picture.height """""""""""""" .. container:: table-row Property picture.height Data type int+ Description The height of the icons. Default 16 .. _picture-expand: picture.expand """""""""""""" .. container:: table-row Property picture.expand Data type string Description A little image for expanding a level of the sitemap. Default EXT:dropdown\_sitemap/res/folder-on.gif .. _picture-collapse: picture.collapse """""""""""""""" .. container:: table-row Property picture.collapse Data type string Description A little image for collapsing a level of the sitemap. Default EXT:dropdown\_sitemap/res/folder-off.gif .. _picture-page: picture.page """""""""""" .. container:: table-row Property picture.page Data type string Description A little image for the page elements of the sitemap. Default EXT:dropdown\_sitemap/res/page.gif .. _picture-spacer: picture.spacer """""""""""""" .. container:: table-row Property picture.spacer Data type string Description A little image for the spacer elements of the sitemap. Default EXT:dropdown\_sitemap/res/spacer.gif .. _picture-expOn: picture.expOn """"""""""""" .. container:: table-row Property picture.expOn Data type string Description A little image for the expand all link. Default EXT:dropdown\_sitemap/res/exp-on.gif .. _picture-expOff: picture.expOff """""""""""""" .. container:: table-row Property picture.expOff Data type string Description A little image for the collapse all link. Default EXT:dropdown\_sitemap/res/exp-off.gif .. _list-tag: list.tag """""""" .. container:: table-row Property list.tag Data type string Description The HTML list tag to use in the sitemap. Default ol .. _list-type: list.type """"""""" .. container:: table-row Property list.type Data type string Description The list type to use in the sitemap. Default 1 .. _linkTarget: linkTarget """""""""" .. container:: table-row Property linkTarget Data type string Description The target of the links in the sitemap. Default \_self .. _expAllLink: expAllLink """""""""" .. container:: table-row Property expAllLink Data type boolean Description Add the expand/collapse all link in the sitemap. Default 1 .. _includeNotInMenu: includeNotInMenu """""""""""""""" .. container:: table-row Property includeNotInMenu Data type boolean Description If this is enabled, pages that are marked as not in menu will appear in the sitemap. Default 0 .. _showSpacers: showSpacers """"""""""" .. container:: table-row Property showSpacers Data type boolean Description If this is enabled, pages that are marked as spacers will appear in the sitemap. Default 1 .. _effects-engine: effects.engine """""""""""""" .. container:: table-row Property effects.engine Data type string Description The effects engine to use. Possible values are scriptaculous, mootols, or none. Default scriptaculous .. _showLevels: showLevels """""""""" .. container:: table-row Property showLevels Data type int+ Description The number of levels to show in the sitemap. Default 5 .. _expandLevels: expandLevels """""""""""" .. container:: table-row Property expandLevels Data type int+ Description The number of levels to expand at start in the sitemap. Default 0 .. _excludeList: excludeList """"""""""" .. container:: table-row Property excludeList Data type string Description A comma list of the pages you don't want to appear in the sitemap. Default .. _excludeDoktypes: excludeDoktypes """"""""""""""" .. container:: table-row Property excludeDoktypes Data type string Description A comma list of the page types you don't want to appear in the sitemap. Default .. _picture-params: picture.params """""""""""""" .. container:: table-row Property picture.params Data type string Description The HTML parameters for the expand & collapse images. Default hspace="0" vspace="0" border="0" .. _titleFields: titleFields """"""""""" .. container:: table-row Property titleFields Data type string Description The field(s) to use as title attribute for the A tag. Default abstract // description // title .. _linkText: linkText """""""" .. container:: table-row Property linkText Data type string Description Forces the field to use as link text. Default .. _descriptionField: descriptionField """""""""""""""" .. container:: table-row Property descriptionField Data type string Description The field to use as description, placed after the page title. Default description .. _effetcs-appear: effetcs.appear """""""""""""" .. container:: table-row Property effetcs.appear Data type string Description The appear effect to use, if scriptaculous is enabled. Default BlindDown .. _effects-fade: effects.fade """""""""""" .. container:: table-row Property effects.fade Data type string Description The fade effect to use, if scriptaculous is enabled. Default BlindUp .. _colors-links: colors.links """""""""""" .. container:: table-row Property colors.links Data type color Description The color of the links, if using the default CSS styles. Default #FF8700 .. _colors-expallBorder: colors.expallBorder """"""""""""""""""" .. container:: table-row Property colors.expallBorder Data type color Description The color of the expall border, if using the default CSS styles. Default #DBA83B .. _colors-expallBackground: colors.expallBackground """"""""""""""""""""""" .. container:: table-row Property colors.expallBackground Data type color Description The color of the expall background, if using the default CSS styles. Default #FCF2C8 .. ###### END~OF~TABLE ###### [tsref:plugin.tx\_dropdownsitemap\_pi1.] .. _Tutorial: Tutorial -------- .. _CSS-styling: CSS styling ^^^^^^^^^^^ This plugin generates a sitemap where each section is an HTML list element, and each item am HTML list item. It uses CSS and JavaScript to hide / show each subsection of an item. You don't have to care about the JavaScript, but you could have some problems with the CSS if you try to customize the look of the sitemap. Note that the colors for the links and the expand / collapse all div can be set directly from the constant editor. So if you just need to change those settings, you don't need to edit the CSS styles. |img-13| If you need to modify something else, please take a look at the code below. It's the default CSS styles used by the plugin: .. _generated: ((generated)) """"""""""""" .. _CSS-DEFAULT-STYLE: \_CSS\_DEFAULT\_STYLE ~~~~~~~~~~~~~~~~~~~~~ :: .tx-dropdownsitemap-pi1 UL, .tx-dropdownsitemap-pi1 OL { list-style: none; margin: 0px; padding: 0px; } .tx-dropdownsitemap-pi1 A, .tx-dropdownsitemap-pi1 A:link, .tx-dropdownsitemap-pi1 A:visited, .tx-dropdownsitemap-pi1 A:hover, .tx-dropdownsitemap-pi1 A:active { color: {$plugin.tx_dropdownsitemap_pi1.colors.links}; background-color: inherit; } .tx-dropdownsitemap-pi1 DIV { margin-left: 20px; margin-top: 2px; padding: 2px; } .tx-dropdownsitemap-pi1 LI.open OL { display: block; } .tx-dropdownsitemap-pi1 LI.closed OL { display: none; } .tx-dropdownsitemap-pi1 LI.open UL { display: block; } .tx-dropdownsitemap-pi1 LI.closed UL { display: none; } .tx-dropdownsitemap-pi1 SPAN.ifsub { text-transform: uppercase; font-weight: bold; } .tx-dropdownsitemap-pi1 SPAN.spc { text-transform: uppercase; font-style: italic; } .tx-dropdownsitemap-pi1 .description { font-style: italic; font-size: 80%; margin-left: 5px; } .tx-dropdownsitemap-pi1 DIV { } .tx-dropdownsitemap-pi1 DIV.level_2 { } .tx-dropdownsitemap-pi1 DIV.level_3 { } .tx-dropdownsitemap-pi1 DIV.level_4 { } .tx-dropdownsitemap-pi1 DIV.level_5 { } .tx-dropdownsitemap-pi1 DIV.expAll { border: solid 1px {$plugin.tx_dropdownsitemap_pi1.colors.expallBorder}; background-color: {$plugin.tx_dropdownsitemap_pi1.colors.expallBackground}; color: inherit; padding: 5px; } .tx-dropdownsitemap-pi1 IMG { margin-right: 5px; } If you want to customize the overall look of the sitemap, you can erase the default CSS styles in your TypoScript template, by using the following code: :: plugin.tx_dropdownsitemap_pi1._CSS_DEFAULT_STYLE > Then, you can use your own CSS file to give the plugin a different look. But be sure to include the statements for the LI.open and LI.closed, which are highlighted in the example above. If you don't include those lines, the drop-down effect won't work anymore, when not using the Scriptaculous effects. For everything else, you're free to do what you want. CSS classes are generated like that: An
    or
      tag for each level. Each item of the level is then first wrapped in a
    • tag, and then in a
      tag. The
      tag has a classname which reflect the level of the item (eg.