Menu do ASP.NET abrindo com clique

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[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)");
  }
}

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[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>

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!