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
-~----------~----~----~----~------~----~------~--~---
