Dos formas de crear un menú contextual en una página web usando JavaScript
Imagínese que cuando los usuarios hacen clic derecho en su sitio web, verán sus "enlaces", "envío de cartas" cuidadosamente organizados e incluso coloridas animaciones Flash interactivas. Figura 1: Deja de babear, demos un festín y veamos cómo se hace.
Tengo dos métodos para transformar el menú contextual (de hecho, la esencia es la misma, ambos son cosas de JavaScript).
El primer método es el anterior, simplemente copie el código fuente a continuación en un archivo HTML en su página web.
Estilo [código]
! --
.skin0 {
posición:absoluta;
text-align:left;
ancho:200px;
borde:2px negro sólido;
color de fondo:menú;
fuente-familia:Verdana;
alto de línea:20px;
cursor:predeterminado;
visibilidad:oculto;
}
.skin1 {
cursor:predeterminado;
font:menutext;
posición:absoluta;
text-align:left;
familia de fuentes: Arial, Helvetica, sans-serif;
familia de fuentes: Arial, Helvetica, sans-serif;
.skin1.sans-serif;
tamaño de fuente: 10pt;
ancho:120px;
color de fondo:menú;
borde:1 botón sólido;
visibilidad.oculta;
visibilidad.oculta;
borde:1 botón sólido;
visibilidad.oculta;
p>
borde:2 botones iniciales resaltados ;
}
.menuitems {
padding-left:15px;
padding -right:10px;
}
--
/estilo
IDIOMA DE ESCRITURA="JavaScript1.2"
! -- Sitio web: .uk --
! -- Este script y más están disponibles en --
!
!
--
! -- Inicio
var menuskin = "skin1"; // skin0, o skin1
var display_url = 0; // Mostrar URL en la barra de estado?clientWidth-event.clientX; /p>
var borde inferior = document.body.clientHeight-event.clientY;
if (borde derecho
ie5menu.offsetWidth)
estilo ie5menu. .left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
else
ie5menu.style.left = document.body scrollLeft. + event.clientX;
if (bottomedge
ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
else
ie5menu.style.top = documento
ment.visibility = "visible";
return false;
}
función hidemenuie5() {
ie5menu.style.visibility = "oculto";
}
función resaltada5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "resaltado";
event.srcElement.style.color = "blanco";
if (display_url)
window.status = event.srcElement.url;
}
}
función lowlightie5() {
si (evento .srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "negro"; p>
ventana.status = "";
}
}
función jumptoie5() {
si (event .srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement .url , event.srcElement.getAttribute("destino"));
else
ventana.ubicación = event.url;
}
}
/ Fin --
/script
div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()"
onClick="jumptoie5();"
div class="menuitems" url="javascript:history.back( ); "return /div
div class="menuitems" url=""volver a la página de inicio/div
hr
div class="menuitems" url); ="
div class="menuitems" url="
hr
div
div class="" menuitems" url= "
hr
div class="" elementos de menú" url="
div clase="menuitems" url="
/ div
lenguaje de script="JavaScript1.2"
if (document.all
ventana
.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
/script
[/code][button value="Copiar código"]
El efecto se muestra en la Figura 2:
No. El segundo método es utilizar el complemento Dreamweaver: Right_Click_Menu_Builder, que se puede encontrar en www.macromedia.com. Después de la instalación, puede encontrar el comando Generador de menús contextuales en el menú Comandos debajo de Dreamweaver.
Después de hacer clic en este comando, aparecerá el cuadro de configuración que se muestra en la Figura 3. Hay dos secciones principales: "Menú" y "Estilos".
El menú es el lugar para configurar funciones. Aquí se pueden configurar hipervínculos y enlaces de envío. El "Texto del menú" en este cuadro de selección es el texto que se mostrará después de hacer clic con el botón derecho (reemplácelo con chino); ingrese la ruta del enlace correspondiente en "Destino" para determinar si se muestra el enlace en una nueva; ventana o el contenido de la ventana actual, complete "En blanco" y se mostrará en una nueva ventana, que es la misma que la configuración "Destino" de Dreamweaver.
Esto es lo mismo que la configuración de Objetivo de Dreamweaver.
¿Cómo agregar Flash? Esto se hace: Agregue una "tabla" a la página web. Se recomienda establecer el ancho de "W" en: "100%", lo que facilitará el posicionamiento de varios elementos que agregue a continuación. Luego, al insertar el archivo Flash SWF en la "Tabla", establezca la posición en "Centrado" (principalmente para facilitar el posicionamiento, por supuesto, puede analizar problemas específicos en detalle y obtendrá su propia experiencia si intenta más).
Consejo: Al crear animaciones Flash, también puedes crear ese tipo de enlace interactivo. ¿Por qué? Para que pueda agregar tantos hipervínculos como desee. ¡El complemento en sí tiene un límite de hasta 10, que se puede resolver usando Flash!