Menu flotante personalizable
Descripción
 
Aqui tienes otra interesante aplicación para agregar menús a tus páginas. Pero no el típico menú desplegable ni nad parecdio sino un menú contextual personalizado. Cuando lo coloques en tu página al pulsar el botón derecho se desplegará tu menú. Para cerrarlo solo tienes que pulsas con el botón izquierdo fuera del menú. Puedes ponerle todas las opciones que desees, así como separadores. El aspecto que presenta por defecto es el clásico de windows, pero por supuesto puedes cambiarlo usando hojas de estilo. Entre sus propiedades figura la opción de elegir el destino de los enlaces a los que lleva cada opción del menú, destino que puede ser la propia página (por defecto), una nueva ventana o un frame de la página.
  
Como usarlo
 
Tan sólo enlaza los archivos de código a tu página, en la que debes escribir una pequeña función acorde con tus necesidades y poco más. En resumen los pasos a seguir son los siguientes:

Enlazar un archivo con los estilos si los vas a usar

<link href="menuflotante.css" rel="stylesheet" type="text/css">

Enlazar el archivo menuflotante.js que es el que contiene el código javascript.

<script language="JavaScript" src="menuflotante.js" type="text/JavaScript"> </script>

Escribir la función que crea y activa el menú. Este es el lugar donde defines tus opciones y enlaces para tu propio menú. Esta función, si la escribes en la página, va en la sección HEAD. Pero en lugar de escribirla en la página puedes añadirla dentro del archivo menuflotante.js, de esta forma, si usas el menú en muchas páginas, para cambiarlo sólo deberás editar este archivo. Esta segunda opción es la más recomendable.

<script languahe="Javascript" type="text/JavaScript">
function preparar()
{
window.elmenu = new oMenuFlot('elmenu');
elmenu.nuevoItem('Opción 1', 'prueba.htm','nueva')
elmenu.nuevoItem('Opción 2', 'prueba.htm','blanco')
elmenu.separador();
elmenu.nuevoItem('Opción 3', 'prueba.htm','')
elmenu.nuevoItem('Opción 4', 'prueba.htm','')
elmenu.menuActivar('elmenu');
}
</script>

Colocar en el body un evento onload que llame a la función del apartado anterior (preparar en el ejemplo).

<body onload="preparar()">

Si estéticamente no te agrada tan sólo debes modificar el archivo menuflotante.css con un editor de hojas de estilo.


Como funciona
 
Básicamente este código crea una capa que se muestra (style.visibility="visible") al pulsar el botón derecho del ratón. Al soltarlo el atributo de visibilidad se pone en oculto. Dentro de esa capa se colocan las opciones del menú que se indican en la función del usuario, la descrita en el apartado anterior.
Como es habitual en el archivo zip verás el código comentado para que lo modifiques si quieres o lo estudies. Además tienes una página de ejemplo para que todo quede lo más claro posible.
  Bajar archivos de la aplicación
Bajarlo
Verlo en funcionamiento
Verlo
 
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio