1

Eu tenho um menu dinâmico no asp.net e um desses itens de menu contém um submenu, porém para acessar esse submenu acontece um evento "mouse hover" que não aparece no meu código. Preciso mudar esse evento "mouse hover" para click de alguma forma, nem que seja por css ou javascript, pois nos celulares android os navegadores não interpretam esse mouse hover e ao tocar no menu ele da refresh na página.

Preciso de alguma propriedade do asp ou algo em css ou até mesmo uma função javascript para que esse hover vire um click.

IMAGEM do menu ---- https://i.sstatic.net/HMca5.jpg


menu asp dinamico:

<asp:Menu ID="MenuPessoal" runat="server"
                      BackColor="#6d7fcc"
                      DynamicHorizontalOffset="3"
                      Font-Names="'Poppins', sans-serif"
                      Font-Size="22px"
                      ForeColor="white"
                      StaticSubMenuIndent="8px"
                      CssClass="your bootstrap classes"
                      Font-Bold="False"
                      StaticMenuStyle-CssClass="nav navbar-nav"
                      Orientation="Vertical" OnMenuItemClick="MenuPessoal_MenuItemClick">

                       <StaticSelectedStyle BackColor="#6d7fcc" />
                       <StaticHoverStyle BackColor="#6d7fcc" ForeColor="black" />
                       <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                       <DynamicHoverStyle BackColor="#6d7fcc" ForeColor="black" />
                       <DynamicMenuStyle BackColor="#6d7fcc" />
                       <DynamicSelectedStyle BackColor="#6d7fcc" />
                       <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
  </asp:Menu>

códido html puro:
    <nav id="sidebar" class="active">

                    <div class="sidebar-header">
                        <h3 id="idSistema">SAD</h3>
                    </div>
                    <ul class="list-unstyled CTAs">


                        <li class="active">
                            <a href="#BemVindo" data-toggle="collapse" aria-expanded="false" style="padding-right: 130px; margin-right: 100px; width: 245px; margin-left: -15px;">
                                <img src="icons/user.png" width="25" height="25">
                                <span id="LblBemVindo">dgmenezes</span></a>
                            <ul class="collapse list-unstyled" id="BemVindo" style="background-color: #6d7fcc; margin-right: 100px;">
                                <li style="background-color: #6d7fcc;">

                    <ul class="list-unstyled ">
                        <li class="active">
                            <a href="menuhome.aspx" aria-expanded="false">Home</a>
                        </li>
                        <li>

                            <a href="#Conteudos" data-toggle="collapse" aria-expanded="true" class="">Conteúdos</a>
                            <ul class="list-unstyled collapse in" id="Conteudos" style="background-color: rgb(109, 127, 204); margin-left: -3%;" aria-expanded="true">
                                <li style="background-color: #6d7fcc;">

                                    <a href="#MenuPrincipal_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=f-uxuyZYSnmzvR6QIWcmHqRLle2WyFSPKO2uYQ_adh0Nm_h7iZzJLvDgivY_jscHuMhl4XJaKiOSH6U0fbcbIyt6gMIMCpdv3bV_xZfCbec1&amp;t=635918659619348548" width="0" height="0" style="border-width:0px;"></a><div class="your bootstrap classes" id="MenuPrincipal" style="float: left;">
        <ul class="level1 nav navbar-nav static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">
            <li role="menuitem" class="static" style="position: relative;"><a title="Coord. Regional" class="level1 static" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqCoordRegional" tabindex="-1">Coord. Regional</a></li><li role="menuitem" class="static" style="position: relative;"><a title="Divulgador" class="level1 static" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqDivulgador" tabindex="-1">Divulgador</a></li><li class="has-popup static" aria-haspopup="MenuPrincipal:submenu:10" role="menuitem" style="position: relative;"><a title="MenuNivel1" class="popout level1 static" href="#" onclick="__doPostBack('ctl00$MenuPrincipal','HSM1')" tabindex="-1">MenuNivel1</a><ul class="level2 dynamic" id="MenuPrincipal:submenu:10" style="display: none; position: absolute; top: 0px; left: 100%;">
                <li role="menuitem" class="dynamic" style="position: relative;"><a title="Comissão" class="level2 dynamic" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqComissao" tabindex="-1">Comissão</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a title="Organização" class="level2 dynamic" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqOrganizacao" tabindex="-1">Organização</a></li>
            </ul></li>
        </ul>
    </div><div style="clear: left;"></div><a id="MenuPrincipal_SkipLink"></a>
                                </li>
                            </ul>
                        </li>


                        <li>
                            <a href="#sistemas" data-toggle="collapse" aria-expanded="false">Menu Sistemas</a>

                            <ul class="collapse list-unstyled" id="sistemas" style="background-color: #6d7fcc;">
                                <li style="background-color: #6d7fcc; height: auto;">



                                </li>

                            </ul>
                        </li>

                    </ul>


                </nav>
private void MenuAdd(ref Menu MenuAtual, MenuItem NovoItemMenu, string iNivelMenu, string ParentIDSemMenu)
            {
                if (iNivelMenu == "0")
                {
                    MenuAtual.Items.Add(NovoItemMenu);
                }
                else
                {

                    foreach (MenuItem x  in MenuAtual.Items)
                    {
                        if (iNivelMenu == "1")
                        {
                            if (x.Value.Equals(ParentIDSemMenu))
                            {
                                MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems.Add(NovoItemMenu); // aqui eu adiciono o SUBMENU ao menu PAI correto. Mas não está funcionando direito
                                break; // sai do FOR
                            }
                        }
                        else
                        {
                            foreach (MenuItem x2 in MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems)
                            {
                                if (Convert.ToInt32(iNivelMenu) == 2)
                                {

                                    if (x2.Value.Equals(ParentIDSemMenu))
                                    {
                                        MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems[MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems.IndexOf(x2)].ChildItems.Add(NovoItemMenu);
                                        break; // sai do FOR
                                    }
                                }
                                else if (Convert.ToInt32(iNivelMenu) == 3)
                                {
                                    foreach (MenuItem x3 in MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems[MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems.IndexOf(x2)].ChildItems)
                                    {
                                        if (x3.Value.Equals(ParentIDSemMenu))
                                        {
                                            //Incluir o codigo aqui para o nivel 3 
                                            break; // sai do FOR
                                        }
                                    }

                                }
                            }
                        }

                    }
                }
            }
6
  • Jovem copie o código já renderizado no browser. Tipo abra sua página no navegador, depois copia o código direto da pagina, da forma que vc postou o código dificulta pra te responder. Agora se quiser eu te passo um modelo básico do com CSS e vc tenta adaptar na sua estrutura pode ser?
    – hugocsl
    Commented 25/04/2018 às 12:45
  • vc diz copiar o html puro do inspect? Commented 25/04/2018 às 13:02
  • Isso mesmo, e o CSS também. Não precisa ser tudo, mas pelo menos a parte do menu. Sem saber como vc montou a estrutura das tags fica difícil te responder com precisão.
    – hugocsl
    Commented 25/04/2018 às 13:13
  • coloquei o html puro, acho que não vai precisar colocar o css, mas se estiver ruim de analisar o problema eu coloco o css, obrigado pela atenção Commented 25/04/2018 às 13:30
  • Olá hugo, tentei colocar esse CSS que me passou na primeira opção e linkar na minha página porém não está funcionando, devo estar fazendo algo errado, não é possível, agora em relação à segunda opção como eu altero uma tag <a> para <label> sendo que estou usando um controle asp e essa tag <a> só aparece no inspect do navegador? Commented 26/04/2018 às 10:37

1 Resposta 1

1

Danilo fiz duas opções só com CSS.

A primeira usa :targer :focus e :active para fazer a UL com o sub menu aparecer. Mas quando vc clica em algum item do Sub Menu ele se fecha. Tb usei href="javascript:void(0);" no <a> para ver se evita o refresh da página.

Não mudei nada na estrutura do HTML só inseri alguns CSSs O erro no snipper abaixo é por causa do seu código .asp, mas ai deve funcionar sem erros.

ul.sub {
      display: none;
    }
a.popout:focus + ul.sub, a.popout:focus + ul.sub, a.popout:focus + ul.sub {
      display: block;
    }
  <nav id="sidebar" class="active">

    <div class="sidebar-header">
      <h3 id="idSistema">SAD</h3>
    </div>
    <ul class="list-unstyled CTAs">


      <li class="active">
        <a href="#BemVindo" data-toggle="collapse" aria-expanded="false" style="padding-right: 130px; margin-right: 100px; width: 245px; margin-left: -15px;">
          <img src="icons/user.png" width="25" height="25">
          <span id="LblBemVindo">dgmenezes</span>
        </a>
        <ul class="collapse list-unstyled" id="BemVindo" style="background-color: #6d7fcc; margin-right: 100px;">
          <li style="background-color: #6d7fcc;">

            <ul class="list-unstyled ">
              <li class="active">
                <a href="menuhome.aspx" aria-expanded="false">Home</a>
              </li>
              <li>

                <a href="#Conteudos" data-toggle="collapse" aria-expanded="true" class="">Conteúdos</a>
                <ul class="list-unstyled collapse in" id="Conteudos" style="background-color: rgb(109, 127, 204); margin-left: -3%;" aria-expanded="true">
                  <li style="background-color: #6d7fcc;">

                    <a href="#MenuPrincipal_SkipLink">
                      <img alt="Skip Navigation Links" src="/WebResource.axd?d=f-uxuyZYSnmzvR6QIWcmHqRLle2WyFSPKO2uYQ_adh0Nm_h7iZzJLvDgivY_jscHuMhl4XJaKiOSH6U0fbcbIyt6gMIMCpdv3bV_xZfCbec1&amp;t=635918659619348548"
                        width="0" height="0" style="border-width:0px;">
                    </a>
                    <div class="your bootstrap classes" id="MenuPrincipal" style="float: left;">
                      <ul class="level1 nav navbar-nav static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">
                        <li role="menuitem" class="static" style="position: relative;">
                          <a title="Coord. Regional" class="level1 static" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqCoordRegional"
                            tabindex="-1">Coord. Regional</a>
                        </li>
                        <li role="menuitem" class="static" style="position: relative;">
                          <a title="Divulgador" class="level1 static" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqDivulgador"
                            tabindex="-1">Divulgador</a>
                        </li>
                        <li class="has-popup static" aria-haspopup="MenuPrincipal:submenu:10" role="menuitem" style="position: relative;">
                          <a title="MenuNivel1" class="popout level1 static" href="javascript:void(0);" onclick="__doPostBack('ctl00$MenuPrincipal','HSM1')"
                            tabindex="-1">MenuNivel1</a>
                          <ul class="level2 dynamic sub" id="MenuPrincipal:submenu:10" style=" position: absolute; top: 0px; left: 100%;">
                            <li role="menuitem" class="dynamic" style="position: relative;">
                              <a title="Comissão" class="level2 dynamic" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqComissao"
                                tabindex="-1">Comissão</a>
                            </li>
                            <li role="menuitem" class="dynamic" style="position: relative;">
                              <a title="Organização" class="level2 dynamic" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqOrganizacao"
                                tabindex="-1">Organização</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div style="clear: left;"></div>
                    <a id="MenuPrincipal_SkipLink"></a>
                  </li>
                </ul>
              </li>


              <li>
                <a href="#sistemas" data-toggle="collapse" aria-expanded="false">Menu Sistemas</a>

                <ul class="collapse list-unstyled" id="sistemas" style="background-color: #6d7fcc;">
                  <li style="background-color: #6d7fcc; height: auto;">



                  </li>

                </ul>
              </li>

            </ul>


  </nav>


Opção n2.

Aqui transformei o <a> em uma label e usei um input=ckeckbox para abrir e fecha o SubMenu. Com essa opção vc tem que clicar para abrir e clicar para fechar tb. Por ser uma label não vai fazer o refresh na página.

Veja abaixo o modelo.

label {
    cursor: pointer;
}
input {
    display: none;
}
input + ul {
    display: none;
}
input:checked + ul {
    display: block;
}
<nav id="sidebar" class="active">

        <div class="sidebar-header">
            <h3 id="idSistema">SAD</h3>
        </div>
        <ul class="list-unstyled CTAs">


            <li class="active">
                <a href="#BemVindo" data-toggle="collapse" aria-expanded="false" style="padding-right: 130px; margin-right: 100px; width: 245px; margin-left: -15px;">
                    <img src="icons/user.png" width="25" height="25">
                    <span id="LblBemVindo">dgmenezes</span>
                </a>
                <ul class="collapse list-unstyled" id="BemVindo" style="background-color: #6d7fcc; margin-right: 100px;">
                    <li style="background-color: #6d7fcc;">

                        <ul class="list-unstyled ">
                            <li class="active">
                                <a href="menuhome.aspx" aria-expanded="false">Home</a>
                            </li>
                            <li>

                                <a href="#Conteudos" data-toggle="collapse" aria-expanded="true" class="">Conteúdos</a>
                                <ul class="list-unstyled collapse in" id="Conteudos" style="background-color: rgb(109, 127, 204); margin-left: -3%;" aria-expanded="true">
                                    <li style="background-color: #6d7fcc;">

                                        <a href="#MenuPrincipal_SkipLink">
                                            <img alt="Skip Navigation Links" src="/WebResource.axd?d=f-uxuyZYSnmzvR6QIWcmHqRLle2WyFSPKO2uYQ_adh0Nm_h7iZzJLvDgivY_jscHuMhl4XJaKiOSH6U0fbcbIyt6gMIMCpdv3bV_xZfCbec1&amp;t=635918659619348548"
                                                width="0" height="0" style="border-width:0px;">
                                        </a>
                                        <div class="your bootstrap classes" id="MenuPrincipal" style="float: left;">
                                            <ul class="level1 nav navbar-nav static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">
                                                <li role="menuitem" class="static" style="position: relative;">
                                                    <a title="Coord. Regional" class="level1 static" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqCoordRegional"
                                                        tabindex="-1">Coord. Regional</a>
                                                </li>
                                                <li role="menuitem" class="static" style="position: relative;">
                                                    <a title="Divulgador" class="level1 static" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqDivulgador"
                                                        tabindex="-1">Divulgador</a>
                                                </li>
                                                <li class="has-popup static" aria-haspopup="MenuPrincipal:submenu:10" role="menuitem"
                                                    style="position: relative;">

                                                    <!-- <a title="MenuNivel1" class="popout level1 static" href="#" onclick="__doPostBack('ctl00$MenuPrincipal','HSM1')"
                                                        tabindex="-1">MenuNivel1</a> -->

                                                    
                                                    <label for="teste" title="MenuNivel1" class="popout level1 static" onclick="__doPostBack('ctl00$MenuPrincipal','HSM1')"
                                                        tabindex="-1">MenuNivel1</label>
                                                    <input type="checkbox" name="" id="teste">
                                                    <ul class="level2 dynamic" id="MenuPrincipal:submenu:10"
                                                        style="position: absolute; top: 0px; left: 100%;">
                                                        <li role="menuitem" class="dynamic" style="position: relative;">
                                                            <a title="Comissão" class="level2 dynamic" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqComissao"
                                                                tabindex="-1">Comissão</a>
                                                        </li>
                                                        <li role="menuitem" class="dynamic" style="position: relative;">
                                                            <a title="Organização" class="level2 dynamic" href="MenuConteudo.aspx?l=es&amp;CodFrm=ArqOrganizacao"
                                                                tabindex="-1">Organização</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="clear: left;"></div>
                                        <a id="MenuPrincipal_SkipLink"></a>
                                    </li>
                                </ul>
                            </li>


                            <li>
                                <a href="#sistemas" data-toggle="collapse" aria-expanded="false">Menu Sistemas</a>

                                <ul class="collapse list-unstyled" id="sistemas" style="background-color: #6d7fcc;">
                                    <li style="background-color: #6d7fcc; height: auto;">



                                    </li>

                                </ul>
                            </li>

                        </ul>


    </nav>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .