Abrindo o menu apenas com o clique | ecode10.com

Abrindo o menu apenas com o clique

Olá leitor, gostaria de informar hoje e mostrar como deixar o menu do asp.net funcionando apenas com o clique

ASP.NET

Saturday, January 1, 2011

Columnist:

Mauricio Junior

Views: 3841 SHARE

        Olá leitor, gostaria de informar hoje e mostrar como deixar o menu do asp.net funcionando apenas com o clique, isto é, se o mouse for passado em cima do menu ele não vai abrir, só abre quando o usuário clique com o mouse na opção.

    Em artigo anterior, mostrei como montar o menu com os dados do banco de dados, agora vou mostrar como customizá-lo no clique.

Utilizado: Plataforma ASP.NET, Ferramenta Visual Studio 2010, Linguagem C#.NET, Javascript.

    Depois de montar o menu de forma dinâmica, um método javascript é acionado para mudar a configuração colocando a propriedade onmousover.

Link: http://www.ecode10.com/article/pesquisar.aspx?cx=002752061519271927076:ikair1khkau&cof=FORID%3A11&ie=UTF-8&sa=Pesquisar&q=menu

Código

<asp:Menu ID="menuSistema" runat="server" DisappearAfter="4000" EnableTheming="false" Orientation="Horizontal" Height="10px" Font-Names="Arial" Font-Bold="true">

</asp:Menu>

eCode 1

Esse código é a parte do HTML usando o componente asp:Menu. Coloquei alguns estilos no menu para melhorar o visual. Foi falado isso no artigo anterior publicado.

Passando para a parte de javascript, para pegar o componente na parte de HTML preciso usar o GetElementById. (eCode 2)

var obj = document.getElementById("<%=menuSistema.ClientID %>");

eCode 2

O valor do getElementById é o nome do meu componente adicionando ponto ClientID. Esse nome é o que aparece junto ao HTML e aberto a linguagens de interpretação.

Depois eu faço um for verificando se o menu é diferente do Sair e adicionando o atributo “onmouseouver”. (eCode3)

for (i = 0; i < Links.length; i++) {

if (Links[i].href != "javascript:Sair();") {

Links[i].href = "javascript:Menu_HoverStatic(ctl00_menuSisteman" + i.toString() + ")";

var obj = document.getElementById("ctl00_menuSisteman" + i.toString());

obj.setAttribute("onmouseover", "void(0)");

}

eCode 3

Noteque o link é verificado, e no final o atributo é adicionado dinamicamente aomenu. O onmouseover com o valor void(0), ou seja, não faz nada quando passar omouse em cima do menu. Bem simples não é? Não se esqueça de chamar o método nofinal da página onde está o menu, no meu caso na página .Master.

Segueabaixo todo o código emulado por mim. (eCode 4)

function AlterarMenu() {

var obj = document.getElementById("<%=menuSistema.ClientID %>");

var Links = obj.getElementsByTagName("a");

//alert(Links.length);

for (i = 0; i < Links.length; i++) {

alert(Links[i].href);

if (Links[i].href != "http://endereco/Logoff.aspx") {

Links[i].href = "javascript:Menu_HoverStatic(ctl00_menuSisteman" + i.toString() + ")";

var obj = document.getElementById("ctl00_menuSisteman" + i.toString());

obj.setAttribute("onmouseover", "void(0)");

}

function MouseOverMenu(obj) {

obj.className = "MenuMouseOver";

}

AlterarMenu();

</script>

eCode 4

O link verificado não será atribuído o onmouseover quando for a página de logoff.aspx. Essa parte você precisa programar e alterar de acordo com o seu site ou sistema. Em resumo, se você quer retirar alguma página a propriedade onmouseover, faça essa verificação no javascript como fiz no eCode 4.

Veja a figura abaixo que mostra o resultado final.

Image 1

Na imagem1, ao passar o mouse em cima do menu não aparece os subs-menus. Antes, aopassar o mouse apareciam todos os outros.

Image 2

A imagem 2 mostra que ao clicar, aparece todos os subs-menus sem qualquer problema. Espero ter ajudado com mais um artigo e qualquer dúvida pode entrar em contato.