Menú personalizado al pulsar botón derecho

Escrito por J.F. el Saturday, 28 de July del 2007 a las 13:39

En ésta ocasión vamos a ver como sustituir el menú normal de una página web al pusar el botón derecho, por un menú que puede ser de navegación con distintas opciones, elaborado por nosotros mismos. Para ello voy a usar un script que me encontré en MetodoVT, el cual he modificado para adaptarlo un poco más a mi gusto. Para hacerlo funcionar tan solo hay que seguir los siguientes pasos:
El script está en una hoja javascript a parte, por lo que enla página que vayamos a utilizar el menú, deberemos hacer la llamada e incluir dicho script. De la siguiente manera lo conseguimos, incluyendo las siguientes líneas en el head:

TEXTO PLANO

HTML:

1. <script src="escript1.js"></script>

Para darle formato al menú, definimos unos cuantos estilos CSS, que puedes modificar tranquilamente a tu gusto, mejorando la apariencia con imágenes, etc.

TEXTO PLANO

CSS:

1. <style>
2. .contenedor{
3.  display:none;position:absolute;z-index:99999999;
4.  width:200px;height:auto;color:#FFFFFF;
5.  background-color: #999999;
6. }
7.  
8. .contenedor a{width:200px;height:25px;
9.  color:#FFFFFF;font-weight: bold;
10.  text-decoration: none;
11. }
12.  
13. .contenedor a:alink,a:vlink{
14.  width:200px;color:#FFFFFF;
15.  font-weight: bold;
16. }
17.  
18. .contenedor a:hover{
19.  width:190px;color:#FFFFFF;
20.  font-weight: bold;text-decoration:underline;
21. }
22. .titulo{
23.  text-align: center;
24.  font-weight: bold;
25.  width:200px;
26.  *width:220px;/*Para IE*/
27.  background-color: #075181;
28.  color: #FFFFF;
29. }
30. li{
31.  padding-left: 5px;
32. }
33. </style>

Una vez seguidos éstos pasos, tan solo debemos ver la parte html, la cual podremos modificar todo lo que queramos exceptuando el <div id="pmenu" class="contenedor"> que es el que permite que funcione el menú contextual. Aquí está el código:

TEXTO PLANO

HTML:

1. <div id="pmenu" class="contenedor">
2. <div class="titulo">Informática Práctica</div>
3. <li><a href="http://pagina1.com">Link 1</a></li>
4. <li><a href="http://pagina2.com">Link 2</a></li>
5. <li><a href="http://pagina3.com">Link 3</a></li>
6. </div>

Para obtener el script, y ya de paso ver un ejemplo puedes descargartelo, y comenzar a modificar a tu gusto.
Descarga: | Menú personalizado con Javascript al pulsar botón derecho.

Comentarios (2)

Categoria: CSS,Javascript

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>