I decided to use a different symbol for the links that open a div, '+'. You can see the script in operation here:
http://www.boltwire.com/index.php?p=test.dropdown Basically it's a one click install of the plugin, then you create code similar to the example. Note you can put anything you want in the hidden divs, including tables, pix, forms, whatever. The ability to do fancy things with the top links is still a bit limited, but we could probably smarten it up also if we needed. Please check on different browsers. To change the css you have to modify the plugin. We could perhaps put that in a css page but it's easier this way. A quick and dirty hack, but it's pretty cool. Cheers, Dan P.S. I set up a solutions page here: solutions.javascript.dropdown On Wed, Aug 12, 2009 at 10:53 AM, karlh626<[email protected]> wrote: > > I like it - nice and simple > > On Aug 12, 9:37 am, The Editor <[email protected]> wrote: >> Actually, as I'm in the process of doing the plugin, it might be worth >> some input on the markup we would want to use. I was thinking >> something like this: >> >> <dropdown> >> [[Link1]] >> * [[sub1]] >> * [[sub2]] >> * [[sub3]] >> [[Link2]] >> * [[sub1]] >> * [[sub2]] >> * [[sub3]] >> </dropdown> >> >> What do you think? >> >> Cheers, >> Dan >> >> >> >> On Wed, Aug 12, 2009 at 9:32 AM, The Editor<[email protected]> wrote: >> > Karl, >> >> > I've been meaning to do something like this for awhile too. I'm >> > working on a plugin based on this code shortly, if it's ok with Linly. >> > Should make it very easy to set it up with markup. But as for cutting >> > and pasting the code into your skin directly, that's fine. So far >> > I've been able to reduce it down to this in the header: >> >> > <style type='text/css'><!-- >> > #dd { margin: 0; padding: 0; z-index: 30; } >> > #dd li { margin: 0; padding: 0; list-style: none; float: left; font: >> > bold 12px arial; } >> > /* The Visible Links */ >> > #dd li a { display: block; margin-right: 2px; padding: 2px 10px; >> > background: #000; color: #fff; text-align: center; } >> > #dd li a:hover { background: #123456; } >> > /* The Hidden Links */ >> > #dd div { position: absolute; visibility: hidden; margin: 0 ; padding: >> > 0px; background: #000; border: 1px solid #000; } >> > #dd div a { position: relative; margin: 0; padding: 3px 20px; width: >> > auto; white-space: nowrap; text-align: left; background: #fff; color: >> > #000; font: 12px arial; } >> > #dd div a:hover {color: #cc99cc;} >> > #dd div br {display: none;} >> > --></style> >> >> > And this somewhere in the body: >> >> > <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> >> >> > <ul id="dd" style=" width:420px; margin: 0 auto"> >> > <li><a href="Link1" onmouseover="mopen('m1')" >> > onmouseout="mclosetime()">One</a> >> > <div id="m1" onmouseover="mcancelclosetime()" >> > onmouseout="mclosetime()"> >> > <a href="1" >1</a><br /> >> > <a href="2">2</a><br /> >> > <a href="3">3</a><br /> >> > <a href="4">4</a><br /> >> > <a href="5">5</a><br /> >> > </div> >> > </li> >> >> > <li><a href="Link2" onmouseover="mopen('m2')" >> > onmouseout="mclosetime()">Two</a> >> > <div id="m2" onmouseover="mcancelclosetime()" >> > onmouseout="mclosetime()"> >> > <a href="1" >1</a><br /> >> > <a href="2">2</a><br /> >> > <a href="3">3</a><br /> >> > <a href="4">4</a><br /> >> > <a href="5">5</a><br /> >> > </div> >> > </li> >> >> > <li><a href="Link3" onmouseover="mopen('m3')" >> > onmouseout="mclosetime()">Three</a> >> > <div id="m3" onmouseover="mcancelclosetime()" >> > onmouseout="mclosetime()"> >> > <a href="1" >1</a><br /> >> > <a href="2">2</a><br /> >> > <a href="3">3</a><br /> >> > <a href="4">4</a><br /> >> > <a href="5">5</a><br /> >> > </div> >> > </li> >> > </ul> >> >> > I'll have it all automated and generated within BoltWire shortly... >> > Thanks Linly for scouting this out for us. >> >> > Cheers, >> > Dan >> >> > On Wed, Aug 12, 2009 at 9:19 AM, karlh626<[email protected]> wrote: >> >> >> Linly, >> >> >> That is exactly what I am looking for. Unfortunately, I know almost >> >> nothing about javascript. >> >> >> Was this javascript that you found something that you made into a >> >> plugin? Or did you include the javascript right into the skin page (I >> >> don't know if something like this would be possible)? >> >> >> Thank you. >> >> >> Karl > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "BoltWire" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/boltwire?hl=en -~----------~----~----~----~------~----~------~--~---
