To add dynamic drop menus to your designs in Sitellite, use the following steps:
1. Include the dropmenu javascript between your template's <head></head> tags:
<script language="javascript" type="text/javascript"
src="/js/dropmenu.js">
</script>2. Include the sitellite/nav/dropmenu/init box just before your closing </body> tag:
<xt:box name="sitellite/nav/dropmenu/init" />3. Include your top level navigation but specify dropmenus="yes" and configure the drop menus through parameters passed to this box:
<xt:box
name="sitellite/nav/top"
list="company, news, products, services, features, contact, faqs"
dropmenus="yes"
xpos="18, 123, 182, 260, 340, 419, 510"
ypos="51, 51, 51, 51, 51, 51, 51"
width="175, 225, 175"
bgcolor="#eeeeee"
over="sdmSetBgcolor ('_td_{name}', '#ccddee')"
out="sdmSetBgcolor ('_td_{name}', '#eeeeee')"
separator=" | "
/>The xpos and ypos are the absolute position for the top-left corner of each drop menu, so they should correspond to the bottom-left corner of each top-level link.
The width is the width for each drop menu, and the bgcolor, over and out parameters specify the colours of the drop menus.
The separator pertains to the top-level links. By default the separator is a <br /> tag, so you'll need to replace it with something more appropriate like the example here.
Further customization is also possible via CSS. If you view the source of your drop menu output, the bottom where you put the sitellite/nav/dropmenu/init box will show the drop menu HTML output. Each drop menu element has CSS classes associated with it for this purpose:
- div.sdm
- table.sdmouter
- table.sdmtable
- td.sdmcell
- a.sdmitem
Revised on September 19, 2007 2:07 PM by admin
Back in time (1 more) | Linked from: Navigation