En las páginas web generales, el menú contextual predeterminado del navegador IE es un modo fijo que no cambia, y la mayoría de los internautas no lo utilizan mucho cuando navegan por páginas web. Para los diseñadores web profesionales, sería genial y conveniente si el menú contextual pudiera diseñarse con contenido personalizado.
Imagínese, cuando un usuario hace clic derecho en su sitio web, verá sus "enlaces" y "enviar mensajes" cuidadosamente organizados, que incluso incluyen coloridas animaciones Flash interactivas. Como se muestra en la Figura 1, no babees, saciemos tu sed y veamos cómo hacerlo :).
Tengo dos formas de transformar el menú contextual (de hecho, la esencia es la misma, ambas son cosas de JavaScript).
El primer método es anterior, simplemente copie el siguiente código fuente en el archivo HTML de la página web.
<estilo>
< !--
.piel0 {
posición:absoluta;
alineación de texto: izquierda;
ancho: 200 px;
borde: 2px negro sólido;
color de fondo: menú;
familia de fuentes: Verdana;
altura de línea: 20 px;
cursor: predeterminado;
visibilidad: oculta;
}
.piel1 {
cursor: predeterminado;
fuente: texto de menú;
posición:absoluta;
alineación de texto: izquierda;
familia de fuentes: Arial, Helvetica, sans-serif;
tamaño de fuente: 10 puntos;
ancho: 120 px;
color de fondo: menú;
borde: 1 botón sólido;
visibilidad: oculta;
borde: resaltado de botones de 2 inicios;
}
.menuitems {
relleno-izquierda: 15px;
relleno-derecha: 10px;
}
-->
</estilo>
< IDIOMA DE ESCRITURA="JavaScript1.2">
< !-- Sitio web: http://www.painting-effects.co.uk -->
< !-- Este script y muchos más están disponibles gratuitamente en línea en -->
< !-- ¡¡La fuente de JavaScript!! http://javascript.internet.com -->
< !-- Comenzar
var menuskin = "piel1"; // piel0 o piel1
var display_url = 0; // ¿Mostrar URL en la barra de estado?
función mostrarmenú5() {
var borde derecho = document.body.clientWidth-event.clientX;
var borde inferior = document.body.clientHeight-event.clientY;
si (borde derecho < ie5menu.offsetWidth)
es decir5menu.style.left = document.body.scrollLeft + event.clientX -
es decir,5menu.offsetWidth;
demás
es decir,5menu.style.left = document.body.scrollLeft + event.clientX;
si (borde inferior < ie5menu.offsetHeight)
es decir,5menu.style.top = document.body.scrollTop + event.clientY -
es decir,5menu.offsetHeight;
demás
es decir,5menu.style.top = document.body.scrollTop + event.clientY;
es decir5menu.style.visibility = "visible";
devolver falso;
}
función ocultarmenú5() {
ie5menu.style.visibility = "oculto";
}
función resaltada5() {
if (event.srcElement.className == "elementos de menú") {
event.srcElement.style.backgroundColor = "resaltar";
event.srcElement.style.color = "blanco";
si(display_url)
ventana.status = event.srcElement.url;
}
}
función lowlightie5() {
if (event.srcElement.className == "elementos de menú") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "negro";
ventana.status = "";
}
}
función saltartoie5() {
if (event.srcElement.className == "elementos de menú") {
si (event.srcElement.getAttribute("objetivo")! = nulo)
ventana.open(event.srcElement.url, event.srcElement.getAttribute("destino"));
demás
ventana.ubicación = evento.srcElement.url;
}
}
// Fin -->
</script>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">Volver</div>
< div class="menuitems" url=" http://javacool.3322.net ">Volver a la página de inicio</div>
<hora>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">Sohu</div>
<hora>
< div class="menuitems" url=" http://www.sina.com.cn ">Sina</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
< /div>
<lenguaje de escritura="JavaScript1.2">
if (documento.todo && ventana.imprimir) {
es decir,5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = ocultarmenuie5;
}
</script>
El efecto es el siguiente:
El segundo método consiste en utilizar un complemento para Dreamweaver: Right_Click_Menu_Buil-der, que se puede descargar desde http://www.macromedia.com . Después de la instalación, el comando "Creador de menús contextuales" se puede encontrar en el menú "Comando" de Dreamweaver.
Haga clic en este comando y aparecerá un cuadro de configuración como se muestra en la Figura 3. Hay principalmente dos partes: "Menú" y "Estilos".
El menú es 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á al hacer clic con el botón derecho (cámbielo a chino). Escriba la ruta del enlace correspondiente en "Destino" para determinar si es una ventana nueva o la actual; La ventana se utiliza para mostrar. El contenido del enlace se mostrará en una nueva ventana completando "En blanco", que es lo mismo que la configuración "Destino" de Dreamweaver.
Styles es responsable de configurar la apariencia del menú. Hay dos opciones:
img src=" "Menú de tipo de Windows (predeterminado)" es el elemento predeterminado: el aspecto más simple y el estilo familiar de Windows;
“Menú personalizado” Menú personalizado, si selecciona este elemento, también deberá configurar el siguiente contenido:
"Ancho del menú", el ancho del menú;
"Fuente", fuente;
"Color de fuente", color de fuente;
"Lado de fuente", tamaño de fuente;
"Color de fondo", "Imagen de fondo", color de fondo e imagen de fondo;
También existe el "Cursor", que se utiliza para seleccionar el estilo del mouse.
Después de configurar lo anterior, puede hacer clic en "Agregar" para generar el efecto. Vista previa, ¿es bueno?
Entonces, ¿cómo agregar Flash? Aquí se explica cómo hacerlo: Agregue una "Tabla" a la página web. Se recomienda que su ancho "W" esté configurado en: "100%". Esto facilitará el posicionamiento de los distintos elementos que agregue a continuación. Bien, inserte el archivo Flash SWF en la "Tabla" y establezca la posición en "centro" (principalmente para facilitar el posicionamiento, por supuesto, puede analizar los problemas específicos en detalle y obtendrá información al intentar más).
Consejo: la animación Flash también podría realizarse con enlaces interactivos. ¿Por qué? De esta manera puedes agregar tantos hipervínculos como quieras. El complemento en sí tiene un límite de hasta 10 elementos, que se puede resolver usando Flash ^_^.