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:


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

+ [[?Link1]]
+ [[?Link2]]

+ Link1
+ Link2

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.

+ [[?logo|BoltWire|class=fancy style='font-size: 1.7em; margin: -9px 500px 0px -10px;']]
+ [[?link1|Link1]]

+ BoltWire
+ Link1
+ Link2

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; ">
+ [[?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'^]]]

+ Text
Click here...
Or here...
+ Image


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!