DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
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¶
Extension Key: dropdown_sitemap
Copyright 2000-2002, Jean-David Gadina / macmade.net, <info@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¶
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¶
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¶
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¶
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.
Users manual¶
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).
Then, on a page, just create a new content element, and choose «Drop- Down sitemap» from the wizard.
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.
On the second tab, you'll be able to configure pages related options.
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.
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.
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.
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.
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.
Simply click on the update button to automatically change the type of those content elements.
Now you're done. All your previous records are now compatible with the new version of the extension.
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.
Configuration¶
Reference¶
Here's the complete reference of the TypoScript options for the plugin. Remember that you can set each one through the constant editor.
picture.width¶
Property
picture.width
Data type
int+
Description
The width of the icons.
Default
16
picture.height¶
Property
picture.height
Data type
int+
Description
The height of the icons.
Default
16
picture.expand¶
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¶
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¶
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¶
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¶
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¶
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¶
Property
list.tag
Data type
string
Description
The HTML list tag to use in the sitemap.
Default
ol
list.type¶
Property
list.type
Data type
string
Description
The list type to use in the sitemap.
Default
1
linkTarget¶
Property
linkTarget
Data type
string
Description
The target of the links in the sitemap.
Default
_self
expAllLink¶
Property
expAllLink
Data type
boolean
Description
Add the expand/collapse all link in the sitemap.
Default
1
showSpacers¶
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¶
Property
effects.engine
Data type
string
Description
The effects engine to use. Possible values are scriptaculous, mootols, or none.
Default
scriptaculous
showLevels¶
Property
showLevels
Data type
int+
Description
The number of levels to show in the sitemap.
Default
5
expandLevels¶
Property
expandLevels
Data type
int+
Description
The number of levels to expand at start in the sitemap.
Default
0
excludeList¶
Property
excludeList
Data type
string
Description
A comma list of the pages you don't want to appear in the sitemap.
Default
excludeDoktypes¶
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¶
Property
picture.params
Data type
string
Description
The HTML parameters for the expand & collapse images.
Default
hspace="0" vspace="0" border="0"
titleFields¶
Property
titleFields
Data type
string
Description
The field(s) to use as title attribute for the A tag.
Default
abstract // description // title
linkText¶
Property
linkText
Data type
string
Description
Forces the field to use as link text.
Default
descriptionField¶
Property
descriptionField
Data type
string
Description
The field to use as description, placed after the page title.
Default
description
effetcs.appear¶
Property
effetcs.appear
Data type
string
Description
The appear effect to use, if scriptaculous is enabled.
Default
BlindDown
effects.fade¶
Property
effects.fade
Data type
string
Description
The fade effect to use, if scriptaculous is enabled.
Default
BlindUp
colors.links¶
Property
colors.links
Data type
color
Description
The color of the links, if using the default CSS styles.
Default
#FF8700
colors.expallBorder¶
Property
colors.expallBorder
Data type
color
Description
The color of the expall border, if using the default CSS styles.
Default
#DBA83B
colors.expallBackground¶
Property
colors.expallBackground
Data type
color
Description
The color of the expall background, if using the default CSS styles.
Default
#FCF2C8
[tsref:plugin.tx_dropdownsitemap_pi1.]
Tutorial¶
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.
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))¶
_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 <OL> or <UL> tag for each level.
Each item of the level is then first wrapped in a <li> tag, and then in a <div> tag. The <div> tag has a classname which reflect the level of the item (eg. <div class=”level_1”). So in your CSS stylesheet, use those classnames to differentiate the levels.
Known problems¶
None at the time. Just contact me if you find some.
To-Do list¶
- Add better effects for Mootools. Contact me if you want to participate.
- Please contact me if you have any suggestion about this extension.
Changelog¶
((generated))¶
3.0.1: 11th public release¶
Fixed a localization bug.
3.0.0: 10th public release¶
- Fixed a bug with TYPO3 4.2
- PHP5 version only.
2.1.1: 9th public release¶
Fixed a bug in IE 6 when using Scriptaculous effects.
2.1.0: 8th public release¶
Added support for Mootools
2.0.0: 7th public release¶
- Added Scriptaculous effects
- Redesign of the CSS styles
- Added an option to force the link text
- Added accessibility features
1.5.0: 6th public release¶
- Added an option to set the A tag title.
- Added an option the set the field which will be used as a description.
1.4.0: 5th public release¶
Added an option to include pages that are marked as spacers.
1.3.0: 4th public release¶
- Added an option to exclude page types.
- Added an option to include pages that are marked as «not in menu».
1.2.0: 3rd public release¶
- Added flexform configuration for the plugin.
- Fixed miscellaneous bugs.
1.1.0: 2nd public release¶
- Fixed a bug with the expand/collapse picture for menu items with no subpages.
- Added some new options, like starting points, expand levels at start, exclude list, expand/collapse all function.
- Added more languages. Thanks a lot to the translators.
1.0.0: 1st public release¶
Drop-Down Site Map - 11