BoltWire

Dropdown

Docs > Extensions > Plugins > Dropdown

Here's a nifty little script you can use to create drop down menus. It requires some css, some js, and some php, but fortunately everything you need is built right into the core distribution.

To use it, make sure the dropdown plugin is enabled by adding this line to your site.config file:

enableDropDown

Then, put some markup like the following on your site:

<dropdown>
+ [[?Link1]]
[[?sub1a]]
[[?sub1b]]
+ [[?Link2]]
[[?sub2a]]
[[?sub2b]]
</dropdown>

<dropdown>
+ Link1
sub1a
sub1b
+ Link2
sub2a
sub2b
</dropdown>

The lines that begin with + are the top level, visible links. The other links are the menu items that dropdown.

You can also add class and style parameters to your links. For example, let's say you wanted to put your logo at the top left. Here, the fancy class calls in a different font (set elsewhere in my css) and the style resizes the font, moves the other links to the right and adjusts the spacing a bit.

<dropdown>
+ [[?logo|BoltWire|class=fancy style='font-size: 1.7em; margin: -9px 500px 0px -10px;']]
[[?link]]
+ [[?link1|Link1]]
[[?link1a]]
[[?link1b]]
[[?link2|Link2]]
[[?link2a]]
[[?link2b]]
</dropdown>

<dropdown>
+ BoltWire
link
+ Link1
link1a
link1b
+ Link2
link2a
link2b
</dropdown>

Feel free to put anything you want in the divs between them, including other text, pictures, forms, tables, whatever. Here's a little bit crazier example just to give you an idea some of the things you could do if you want.

<div style="background-color:red; height: 55px; ">
<dropdown>
+ [[?link1|Text|style="background-color: green;"]]
[[?sub1a|sub1a|style="background-color: orange;"]]
<span style='padding: 10px; color: yellow;'>Click here...</span>
[[?sub1b|sub1a|style="background-color: pink;"]]
<span style='padding: 10px; color: gray;'>Or here...</span>
+ [[?link2|Image|style="background-color: blue;"]]
[[?link2|[^ds.jpg style='margin: 10px 5px 0px 5px'^]]]
</dropdown>
</div>

<dropdown>
+ Text
sub1a
Click here...
sub1a
Or here...
+ Image

</dropdown>

For additional styling options, be sure to check out the code.embed.dropdown page which controls the styling of the various list items. Edit with care!

If you want a dropdown menu, my recommendation is to create a basic block.dropdown page for your site and then insert that into your skin, in place of your tabs block.

And laast, don't forget to enable it on site.config!