[thelist] Suckerfish Dropdown Menus - How do they work?

david.landy at somerfield.co.uk david.landy at somerfield.co.uk
Mon Apr 19 05:47:50 CDT 2004


Thanks, Simon. Unfortunately I can't get anything onto an external website
but here's the code I have cobbled together so far (see below). It's nothing
to do with Suckerfish any more, but still!

It's designed to have four overlapping layers, containing the different
submenus, which are made visible/invisible when the user hovers over the
relevant image.

The two issues I still have are:

1. How do I get the submenus to appear at exactly the same position, top and
left?

2. How can I replace my ugly table with css layout?

Thanks in advance for all help offered.

David.

Code:

<html>
<head>
<title>My Menu</title>
<style type="text/css">
img {
    cursor:hand;
    border:none;
}
</style>
</head>
<body>

<script language=javascript>
var baseEl = "actions";
var visibleMenu = "actions";

function showMenu(menu) {
    //hide the menu currently showing
    if (visibleMenu.length > 0) {
        var el = document.getElementById(visibleMenu);
        el.style.visibility = "hidden";
    }

    //fetch the new menu element 
    var el = document.getElementById(menu);
    
    //position the new menu
    var orig = document.getElementById(baseEl);
    el.style.top = orig.style.top;
    el.style.left = orig.style.left;
    
    //show new menu
    el.style.visibility = "visible";
    
    //save visible menu's name
    visibleMenu = menu;
}
</script>

<center>
<table cellspacing="0" cellpadding="2" border="1" class="menugrid"
width="75%" height="75%">

<tr class=menugrid valign=bottom>
<td class=menugrid align=center><img src="images/alarm.gif" alt="actions"
style="cursor:hand" onmouseover="showMenu('actions')"><br>
<font size=2>actions</font>
</td>
<td class=menugrid>&nbsp</td>
<td class=menugrid align=center><img src="images/tools.gif"
alt="maintenance" onmouseover="showMenu('maintenance')"><br>
<font size=2>maintenance</font>
</td>
</tr>

<tr class=menugrid height="65%" valign="top">
<td class=menugrid align=center>&nbsp;</td>
<td class=menugrid valign="top"><!--Menu Options Go Here-->

<div id="actions" style="visibility:visible;position:relative">
    Actions
    <ul>
        <li><a href="control.jsp?action=showmyactions" title="view my
actions">my actions</a>
    </ul>
</div>

<div id="maintenance" style="visibility:hidden;position:absolute">
    Maintenance
    <ul>
        <li><a href="control.jsp?action=showalerts"
title="alerts">alerts</a>
        <li><a href="control.jsp?action=showdays" title="days">days</a>
        <li><a href="control.jsp?action=showevents"
title="events">events</a>
        <li><a href="control.jsp?action=showperiods"
title="periods">periods</a>
        <li><a href="control.jsp?action=showqualifiers"
title="qualifiers">qualifiers</a>
        <li><a href="control.jsp?action=showrecipients"
title="recipients">recipients</a>
        <li><a href="control.jsp?action=showrules" title="rules">rules</a>
        <li><a href="control.jsp?action=showsettings"
title="settings">settings</a>
        <li><a href="control.jsp?action=showstatuses"
title="statuses">statuses</a>
    </ul>
</div>

<div id="process" style="visibility:hidden;position:absolute">
    Process
    <ul>
        <li><a href="control.jsp?action=makeprocess" title="make
process">make process</a>
        <li><a href="control.jsp?action=rules" title="age all tasks and
apply ruleset">nightly run</a>
        <li><a href="control.jsp?action=showprocesses"
title="processes">processes</a>
        <li><a href="control.jsp?action=showprocessmap"
title="processmap">processmap</a>
        <li><a href="control.jsp?action=showsteps" title="steps">steps</a>
    </ul>
</div>

<div id="people" style="visibility:hidden;position:absolute">
    People
    <ul>
        <li><a href="control.jsp?action=showactors"
title="actors">actors</a>
        <li><a href="control.jsp?action=showgroups"
title="groups">groups</a>
    </ul>
</div>

</td>
<td class=menugrid align=center>&nbsp;</td>
</tr>

<tr class=menugrid>
<td class=menugrid align=center><img src="images/cogs.gif" alt="process map"
onmouseover="showMenu('process')"><br>
<font size=2>process map</font>
</td>
<td class=menugrid>&nbsp</td>
<td class=menugrid align=center><img src="images/people.gif" alt="people"
onmouseover="showMenu('people')"><br>
<font size=2>people</font>
</td>
</tr>

</tr>

</table>
</center>

</body>
</html>



 
If you are not the intended recipient of this e-mail, please preserve the
confidentiality of it and advise the sender immediately of any error in
transmission. Any disclosure, copying, distribution or action taken, or
omitted to be taken, by an unauthorised recipient in reliance upon the
contents of this e-mail is prohibited. Somerfield cannot accept liability
for any damage which you may sustain as a result of software viruses so
please carry out your own virus checks before opening an attachment. In
replying to this e-mail you are granting the right for that reply to be
forwarded to any other individual within the business and also to be read by
others. Any views expressed by an individual within this message do not
necessarily reflect the views of Somerfield.  Somerfield reserves the right
to intercept, monitor and record communications for lawful business
purposes.


More information about the thelist mailing list