[Resolvido] Menu do ASP.NET abrindo com clique

[RSS iMasters 5]

 

Hoje vou mostrar como deixar o menu do ASP.NET funcionando apenas com o clique. Isto é, só irá abrir quando o usuário clicar sobre o botão do menu, ao contrário do padrão, que abre enquanto o cursor do mouse passar sobre ele.

Eu já mostrei como montar o menu com as informações do banco de dados. Agora, vou mostrar como personalizá-lo na hora do clique.

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

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

 

<StaticMenuItemStyle ForeColor="Black" HorizontalPadding="5px" Height="15px" BorderWidth="1px" BorderColor="Transparent" Font-Size="11pt" />

 

<StaticHoverStyle BackColor="Transparent" CssClass="staticHoverStyle" ForeColor="#ffffff" BorderColor="#f8f8f8" BorderWidth="1px" />

 

<StaticSelectedStyle BackColor="#d4d4d4" ForeColor="#ffffff" BorderColor="Transparent" BorderWidth="1px" />

 

<DynamicMenuStyle BackColor="#f5f5f5" ForeColor="#ffffff" BorderColor="#b4b4b4" BorderWidth="1px" />

 

<DynamicMenuItemStyle Height="28px" HorizontalPadding="15px" Width="100%" Font-Size="10pt" ForeColor="#666666" Font-Bold="false" />

 

<DynamicHoverStyle ForeColor="#ffffff" CssClass="dynamicHoverStyle" BackColor="Transparent" />

 

</asp:Menu>

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

 

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

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

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.

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

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

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

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

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

}

}

Note que o link é verificado e no final o atributo é adicionado dinamicamente ao menu. O onmouseover com valor void(0) não faz nada quando o cursor do mouse passa em cima do menu. Bem simples, não?

Não se esqueça de chamar o método no final da página onde está o menu, no meu caso na página .Master.

Segue abaixo todo o código emulado por mim.

<script type="text/javascript">

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.href);

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

Links.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>

O link verificado não terá o atributo 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ê precisa retirar a propriedade onmouseover de alguma página, faça essa verificação no javascript como fiz no código acima.

Veja a figura abaixo que mostra o resultado final.

Na imagem acima, ao passar o cursor do mouse pelo menu não faz aparecer os submenus. Antes, ao passar o mouse apareciam todos os outros.

A segunda imagem ilustra que, ao clicar, aparece todos os submenus sem qualquer problema.

Espero ter ajudado com mais este artigo. Qualquer dúvida, entre em contato.

Até o próximo!

 

 

http://imasters.com.br/artigo/23022/c-sharp/menu-do-aspnet-abrindo-com-clique