Demo Dynamic HTML - Menú persiana con el botón derecho

Menú persiana con el botón derecho

Compatibilidad: Ms Internet Explorer, Netscape

Un ejemplo evidente del nivel tecnológico alcanzado por MsIe 5. Pulsando el botón derecho del ratón aparece un menú de recursos fácil de modificar. Todo ello se obtiene con un código simple e intuitivo. ¡Prueba!.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<style>
A:hover{color:red}
#divBg{position:absolute; top:0; left:0; visibility:hidden; height:50}
DIV.clSub{position:relative; top:-5; font-family:arial,helvetica; font-size:12px; padding:10px; visibility:hidden; background-color:Silver; layer-background-color:Silver}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true

//Do you want to hide all the other submenus when you click a new?
var hideAll=true

/********************************************************************************
If you want to change the appearans on the text, or background or anything
do that in the style tag above, or in the table tag below.

NOTE: This menu have some "small" bugs.
In Netscape the links in the submenus will work even though the
submenus are hidden, this has something to do with
a lousy implementation of the relative positioning in Netscape.
In IE links "underneath" the submenus will not work even though the
submenus are hidden.
I will look into this and might find a fix for it.
********************************************************************************/

/********************************************************************************
Object constructor
********************************************************************************/
function makeMenuBar(obj,nest,vis){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
	this.hideIt=b_hideIt;	this.showIt=b_showIt; this.vis=b_vis						
	if(ie && vis) this.css.visibility='hidden'
	this.state=1
	this.go=0
	this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
	this.top=b_gettop
    this.obj = obj + "Object"; 	eval(this.obj + "=this")	
}
//Get's the top position.
function b_gettop(){
	var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
	return gleft;
}
//The functions for showing and hiding
function b_showIt(){
	this.css.visibility="visible"
}
function b_hideIt(){
	this.css.visibility="hidden"
}
function b_vis(){
	if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
	if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
	if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place, 
show it..
********************************************************************************/
function menuBarInit(){
	oSub=new Array()
	//Change it here if you want more or less submenus.
	oSub[0]=new makeMenuBar('divSub0','divBg',1)
	oSub[1]=new makeMenuBar('divSub1','divBg',1)
	oSub[2]=new makeMenuBar('divSub2','divBg',1)
	oSub[3]=new makeMenuBar('divSub3','divBg',1)
	oSub[4]=new makeMenuBar('divSub4','divBg',1)
	//Moving menuBar
	oMenu=new makeMenuBar('divBg')
	scrolled=n?"window.pageYOffset":"document.body.scrollTop"
	oMenu.css.top=eval(scrolled)
	oMenu.css.visibility='visible'
	if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}

/********************************************************************************
Shows and hides the submenus
********************************************************************************/
function extract(num){
	if(hideAll){
		for(i=0;i<oSub.length;i++){
			if(num!=i) oSub[i].hideIt()
		}
	}
	!oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt();

}

onload=menuBarInit;
</script>
</head>
<body bgcolor="White">
<div id="divBg">
<table width="102%" border="0" cellspacing="0" cellpadding="5" align="CENTER" valign="MIDDLE">
	<tr bgcolor="#C0C0C0">
		<td height="30"><a href="#" onclick="extract(0); return false">LISTA DE DISTRIBUCIÓN</a></td>
		<td><a href="#" onclick="extract(1); return false">GUÍAS</a></td>
		<td><a href="#" onclick="extract(2); return false">GRÁFICA</a></td>
		<td><a href="#" onclick="extract(3); return false">OTRO</a></td>
		<td><a href="#" onclick="extract(4); return false">ENLACE</a></td>
	</tr>
	
	<tr>
		<td valign="TOP">
		<div id="divSub0" class="clSub">
			
			<a href="http://www.htmlpoint.com/">Un gif al día</a>     <br>
			<a href="http://www.htmlpoint.com/">Un javascript a la semana</a>
		</div>
		</td>
		<td valign="TOP">
		<div id="divSub1" class="clSub">
			<a href="http://www.htmlpoint.com/guida">Guía a HTML</a>     <br>
			<a href="http://www.htmlpoint.com/css">Guía a  CSS</a><br>
			<a href="http://www.htmlpoint.com/xml">Guía a XML</a>
		</div>
		</td>
		<td valign="TOP">
		<div id="divSub2" class="clSub">
			<a href="http://www.htmlpoint.com/grafica/gif.htm">GIF animados</a>     <br>
			<a href="http://www.htmlpoint.com/grafica/sfondi.htm">Fondos</a>
		</div>
		</td>
		<td valign="TOP">
		<div id="divSub3" class="clSub">
			<a href="http://www.htmlpoint.com/font">True Type font</a>     <br>
			<a href="http://www.htmlpoint.com/controlli">Controles de calidad</a><br>
			<a href="http://www.htmlpoint.com/faq">Faq</a><br>
			<a href="http://www.htmlpoint.com/libri">Libros</a><br>
			<a href="http://www.htmlpoint.com/software">Software</a>
		</div>
		</td>
		<td valign="TOP">
		<div id="divSub4" class="clSub">
			<a href="http://www.hwupgrade.com">Hardware Upgrade</a>     <br>
			<a href="http://www.in-it.com">Informática Italiana</a><br>
			<a href="http://www.freeonline.org">FreeonLine</a>
		</div>
		</td>
	</tr>
</table>
</div>
</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]