Em páginas da web em geral, o menu padrão do botão direito do navegador IE é um modo fixo e imutável, e a maioria dos internautas não o utiliza muito ao navegar nas páginas da web. Para web designers profissionais, seria muito legal e conveniente se o menu do botão direito pudesse ser projetado com conteúdo personalizado.
Imagine, quando um usuário clica com o botão direito em seu site, você verá seus "links" e "enviar mensagens" cuidadosamente organizados, que incluem até animações coloridas em Flash interativas! Como mostra a Figura 1 - não babe, vamos matar sua sede e ver como fazer :).
Tenho duas maneiras de transformar o menu do botão direito (na verdade, a essência é a mesma, ambas são coisas de JavaScript).
O primeiro método é anterior, basta copiar o seguinte código-fonte no arquivo HTML da página da web.
<estilo>
< !--
.skin0 {
posição:absoluta;
alinhamento de texto: esquerda;
largura:200px;
borda: 2px preto sólido;
cor de fundo:menu;
família de fontes:Verdana;
altura da linha: 20px;
cursor: padrão;
visibilidade:oculto;
}
.pele1 {
cursor: padrão;
fonte: texto do menu;
posição:absoluta;
alinhamento de texto: esquerda;
família de fontes: Arial, Helvetica, sans-serif;
tamanho da fonte: 10pt;
largura:120px;
cor de fundo:menu;
borda: 1 botão sólido;
visibilidade:oculto;
borda: destaque de 2 botões de início;
}
.menuitems {
preenchimento à esquerda: 15px;
preenchimento à direita: 10px;
}
-->
</estilo>
< IDIOMA DO SCRIPT="JavaScript1.2">
< !-- Web Site: http://www.painting-effects.co.uk -->
< !-- Este script e muitos mais estão disponíveis gratuitamente online em -->
< !-- A fonte do JavaScript http://javascript.internet.com -->
< !-- Comece!!
var menuskin = "skin1"; // skin0 ou skin1;
var display_url = 0; // Mostrar URLs na barra de status?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (borda direita < ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
outro
ie5menu.style.left=document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
outro
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visível";
retornar falso;
}
function hidemenuie5() {
ie5menu.style.visibility = "oculto";
}
função destaque5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "destacar";
event.srcElement.style.color = "branco";
if(url_exibição)
janela.status = evento.srcElement.url;
}
}
função lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "preto";
janela.status = "";
}
}
função pulartoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("destino") != nulo)
window.open(event.srcElement.url, event.srcElement.getAttribute("destino"));
outro
janela.localização=evento.srcElement.url;
}
}
// Fim -->
</script>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">Voltar</div>
< div class="menuitems" url=" http://javacool.3322.net ">Voltar à página inicial</div>
<h>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">Sohu</div>
<h>
< div class="menuitems" url=" http://www.sina.com.cn ">Sina</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
</div>
<linguagem script="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu=showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
O efeito é o seguinte:
O segundo método é usar um plug-in para Dreamweaver - Right_Click_Menu_Buil-der, que pode ser baixado em http://www.macromedia.com . Após a instalação, o comando “Right Click Menu Builder” pode ser encontrado no menu “Command” do Dreamweaver.
Clique neste comando e uma caixa de configuração conforme mostrada na Figura 3 aparecerá. Existem basicamente duas partes: “Menu” e “Estilos”.
O menu serve para definir funções de hiperlinks e enviar links. Até 10 conexões podem ser definidas aqui. “Texto do Menu” nesta caixa de seleção é o texto que será exibido quando você clicar com o botão direito (altere para chinês); escreva o caminho do link correspondente em “URL” para determinar se é uma nova janela ou a atual; janela é usada para exibição O conteúdo do link será exibido em uma nova janela preenchendo "Em branco", que é igual à configuração "Destino" do Dreamweaver.
Styles é responsável por definir a aparência do menu. Existem duas opções:
img src=" "Windows Type Menu (Default)" é o item padrão - a aparência mais simples, estilo familiar do Windows;
“Menu Personalizado” Menu personalizado, se você selecionar este item, também precisará definir o seguinte conteúdo:
“Largura do Menu”, a largura do menu;
"Fonte", fonte;
“Cor da Fonte”, cor da fonte;
“Lado da fonte”, tamanho da fonte;
“Cor de fundo”, “Imagem de fundo”, cor de fundo e imagem de fundo;
Há também o "Cursor", que é usado para selecionar o estilo do mouse.
Após definir o acima, você pode clicar em “Adicionar” para gerar o efeito. Visualize, está bom.
Então, como adicionar Flash? Veja como fazer: Adicione uma “Tabela” à página web É recomendável que sua largura “W” seja definida como: “100%”. Ok, insira o arquivo Flash SWF na “Tabela” e defina a posição como “centro” (principalmente para facilitar o posicionamento, claro, você pode analisar os problemas específicos detalhadamente e obterá insights tentando mais).
Dica: A animação em Flash também pode ser feita com links interativos. Por quê? Dessa forma, você pode adicionar quantos hiperlinks desejar. O plug-in em si tem um limite de até 10 itens, que podem ser resolvidos usando Flash ^_^!