SupportArea

BoltWire is a FREE content management system written in PHP.

Its innovative architecture combined with best-in-class forms processing makes it ideal for creating complex, interactive, web applications fast...


PLUGINS

SKINS

LANGUAGES

Dropdown Menu

Extensions > Plugins > Dropdown Menu

Summary: A nifty little css/js drop down menu
Status: Stable, Version 4.19
Lastmodified:
Downloads: dropdown.php

Here's a cool script you can use to create drop down menus.

Installation

1. Download the php script to your shared plugins folder, then enable it in site.config as needed.

2. Cut and paste the following code to code.embed.dropdown. (This name is hardcoded in the php script). Feel free to modify the CSS, but be careful you don't change something that breaks the script.


<style type='text/css'><!--
#dd { margin: 0; padding: 5px; z-index: 30; }
#dd li { padding: 0px; list-style: none; float: left; font-weight: bold; }
#dd li a { display: block; text-decoration: none; padding: 5px 10px; font-weight: bold; color: white; margin-top: 6px; }
#dd li a:hover { background: #777; }
#dd div { position: absolute; visibility: hidden; background-color: #333; padding: 0px; }
#dd div a {     position: relative; margin-top: 5px; width: auto; white-space: nowrap; text-align: left; }
#dd div br {display: none;}
--></style>

<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id) {     
     mcancelclosetime();
     if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
     ddmenuitem = document.getElementById(id);
     ddmenuitem.style.visibility = 'visible';
     }
function mclose() {
     if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
     }
function mclosetime() {
     closetimer = window.setTimeout(mclose, timeout);
     }
function mcancelclosetime() {
     if(closetimer) {
          window.clearTimeout(closetimer);
          closetimer = null;
          }
     }
document.onclick = mclose;
</script>

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


<dropdown>
+ [[?Link1]]
[[?sub1]]
[[?sub2]]
+ [[?Link2]]
[[?sub1]]
[[?sub2]]
</dropdown>


The lines that begin with + are the top level, visible links. Feel free to put anything you want in the divs between them, including other text, pictures, forms, tables, whatever. Kind of cool, hey?

You can even add text and pictures in the menu. Here's a more complex example:


<dropdown>
+ [[?Text]]
[[?sub1]]
<span style='padding:10px'>Click here...</span>
[[?sub2]]
<span style=padding:10px>Or here...</span>
+ [[?Link2|Image]]
[^data-sword.jpg style='margin: 10px 5px 0px 5px'^]
</dropdown>