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.
To avoid this, please take a look at the code below. It's the default CSS styles used by the plugin:
_CSS_DEFAULT_STYLE
.tx-dropdownsitemap-pi1 A {font-weight: bold;
}
.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 DIV {border: solid 1px #DFE2E3;
background: #FAFBFB;
padding: 2px;
margin-bottom: 5px;
}
.tx-dropdownsitemap-pi1 DIV.level_2 {background: #FFFFFF;
}
.tx-dropdownsitemap-pi1 DIV.level_2 A {font-weight: normal;
}
.tx-dropdownsitemap-pi1 DIV.level_3 {background: #FAFBFB;
}
.tx-dropdownsitemap-pi1 DIV.level_4 {background: #FFFFFF;
}
.tx-dropdownsitemap-pi1 DIV.level_5 {background: #FAFBFB;
}
.tx-dropdownsitemap-pi1 DIV.expAll {text-align: center;
border: solid 1px #DFE2E3;
background: #FAFBFB;
}
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.
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.
