Hidden/Alternate Menu

Here is a quick menu hidden in a Mouse Gesture for additional navigation on a site or administraitive duties.

To activate the menu simply right click anywhere on the screen , hold the button down, then move the mouse down 50px's and release. This will display the hidden menu.

There are two parts to it, first the Style and Script....

<style>
.expanded {
position:absolute;
padding:1px;
font:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
background-color:#D4D0C8;
width:150px;
border-left :2px solid #FFFFFF;
border-top :2px solid #FFFFFF;
border-right :2px solid #999999;
border-bottom : 2px solid #999999;
}
a.expanda {
padding-left:15px;
padding-right:15px;
display:block;
text-decoration:none;
color:#000000;
}
a.expanda:hover {
background-color:#003366;
color:#FFFFFF;
}
</style>
<script language="javascript">
document.oncontextmenu = null;
document.onmousedown = doDown;
document.onmouseup = doUp;
var timerID = 1;
var ly;
var ny;
var targ;
function doDown(e)
{
clearTimeout(timerID);
document.oncontextmenu = null;
var rightclick;
if (!e) e = window.event
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
try
{
if (e.target) targ = e.target.getAttribute('id');
else if (e.srcElement) targ = e.srcElement.getAttribute('id');
if (targ != "navlink") {document.getElementById('altnav').style.display = 'none'}
}
catch(e)
{
document.getElementById('altnav').style.display = 'none'
}
if (rightclick != false)
{
ly = e.clientY;
}
return false;
}

function doUp(e)
{
var rightclick;
if (!e) e = window.event
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
if (rightclick != false)
{
if (!e) var e = window.event;
ny=e.clientY;
lytemp = ly+50;
if (ny>lytemp)
{
document.getElementById('altnav').style.display = "block";
document.getElementById('altnav').style.left = e.clientX + 2;
document.getElementById('altnav').style.top = ly+2;
window.status = "down menu";
document.oncontextmenu = fakecontext;
timerID = setTimeout("document.getElementById('altnav').style.display = 'none'", 5000);
}
}
ly = null;
ny = null;
}
function fakecontext(){return false;};
</script>

And the menu div to place inside the body tag. Edit this to act as the menu you would like. Remember that you can access the event.target if you want to have the menu dynamicaly effect things based on whats clicked.

<div style="display:none" class="expanded" id="altnav">
<a href="http://www.news.com" class="expanda" id="navlink"><div style="float:right;width:20px;text-align:left;">Ctrl+?</div>Option 1</a>
<a href="http://www.cnn.com" class="expanda" id="navlink"><div style="float:right;width:20px;text-align:left;">Ctrl+?</div>Option 2</a>
</div>