Try this script in a Content Editor Web Part (CEWP) for dynamic generation of a mouseover menu with cascading options.
Before Mouseover:
After Mouseover:
<menu id="menu_WPQ_" class="ms-SrvMenuUI"></menu>
<SPAN class="ms-HoverCellInActive"
style="CURSOR: hand"
onmouseover="MainMenu(this);"
onmouseout="this.className='ms-HoverCellInActive'"
nowrap valign="bottom"
>
<IMG SRC="/_layouts/images/Menu1.gif" border="0" />
</SPAN>
<script type="Text/JavaScript" language="JavaScript">
// Generate dynamic menu example
// todd@mindsharp.com MindsharpBlogs.com/Todd
// CopyRight © 2006, All Rights Reserved
// Last updated 03/24/2006
// Please don't delete this header
var IMG_PATH = "/_layouts/images/";
var SEP = ", ";
var menu = document.getElementById("menu_WPQ_");
function MainMenu(span)
{
try
{
this.className = "ms-HoverCellActiveDark";
var options = new Array(8);
options[0] = "http://www.altavista.com, AltaVista";
options[1] = "http://web.ask.com, Ask";
options[2] = "http://www.google.com, Google";
options[3] = "http://www.hotbot.com, HotBot";
options[4] = "http://search.lycos.com, Lycos";
options[5] = "http://search.msn.com, MSN";
options[6] = "http://www.search.com, CNet";
options[7] = "http://search.yahoo.com, Yahoo!";
//Define a WSS dynamic smart menu
if(menu)
{
//Add an option
CAMOpt(menu, "option1",
"document.location.href=\"http://wss1\";",
IMG_PATH + "aca16.gif", "Menu tooltip is broken");
//Add a Seperator
CAMSep(menu);
//Add a submenu with two options
var opts = CASubM(menu, "More Options",
IMG_PATH + "active.gif", "submenu tooltip also broken");
var opts11 = CASubM(opts, "Option 1.1",
IMG_PATH + "acl16.gif", "");
CAMOpt(opts, "Option 1.2",
"document.location.href=\"http://sps1\";",
IMG_PATH + "acl16.gif", "");
for(var i=0; i<options.length; i++)
{
option = options[i].split(SEP);
optionUrl = option[0];
optionName = option[1];
CAMOpt(opts11, optionName,
"document.location.href=\"" + optionUrl + "\";","", "");
}
}
OMenuInt(menu_WPQ_, span, 0, 0, 0);
}
catch(e)
{
alert(e.Message);
}
}
</script>
Here is flatter menu based entirely on CSS (rather than JavaScript) hung on a hyperlink so it must be clicked to see the menu:
Before Click:
After Click:
<style>
.ms-SrvMenuUI
{
display:none;
}
.ms-HoverCellInActive
{
border: none;
margin: 1px;
background-color: transparent;
}
.ms-HoverCellActive
{
border: #f4c660 1px solid;
background-color: #e1ecfc;
}
</style>
<menu id="myLinks" class="ms-SrvMenuUI">
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/google.gif"
onMenuClick="window.location.href='http://google.com';"
>Google</ie:menuitem>
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/msn.gif"
onMenuClick="window.location.href='http://msn.com';"
>MSN</ie:menuitem>
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/altavista.gif"
onMenuClick="window.location.href='http://Altavista.com';"
>Altavista</ie:menuitem>
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/ask.gif"
onMenuClick="window.location.href='http://Ask.com';"
>Ask</ie:menuitem>
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/hotbot.gif"
onMenuClick="window.location.href='http://HotBot.com';"
>HotBot</ie:menuitem>
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/lycos.gif"
onMenuClick="window.location.href='http://Lycos.com';"
>Lycos</ie:menuitem>
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/search_com.gif"
onMenuClick="window.location.href='http://Search.com';"
>Search.com</ie:menuitem>
<ie:menuitem
iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/yahoo.gif"
onMenuClick="window.location.href='http://Yahoo.com';"
>Yahoo!</ie:menuitem>
</menu>
<div class="ms-HoverCellInActive"
onmouseover="this.className='ms-HoverCellActive'"
onmouseout="this.className='ms-HoverCellInActive'">
<a id="menuLink"
style="CURSOR: hand"
onclick="JavaScript: if(!myLinks.isOpen())
myLinks.show(this, true, 0, 0, 0);"
tabindex="0">
Search Engines
</a>
</div>
I wrote these a long time ago and I didn't vet them for this post but I couldn't see waiting any longer to share them with everyone.
<Todd />