1
I have a dynamic menu in Asp.net and one of these menu items contains a submenu, but to access this submenu happens a "mouse Hover" event that does not appear in my code. I need to change this event "mouse Hover" to click somehow, even if it is by css or javascript, because on android phones browsers do not interpret this mouse hover and by tapping the refresh menu on the page.
I need some Asp property or something in css or even a javascript function for this Hover to become a click.
MENU IMAGE ---- https://i.stack.Imgur.com/Hmca5.jpg
dynamic Asp menu:
<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&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&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&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&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&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
}
}
}
}
}
}
}
}
Young copy the already rendered code in the browser. Like open your page in the browser, then copy the code straight from the page, the way you posted the code makes it difficult to answer you. Now if you want I pass you a basic template of with CSS and vc tries to adapt in its structure can be?
– hugocsl
vc says copy the pure html of the Inspect?
– Danilo Gonçalves
That’s right, and so does CSS. It doesn’t have to be everything, but at least the menu part. Not knowing how you set up the tag structure makes it difficult to answer you accurately.
– hugocsl
I put the html neat, I think you will not need to put the css, but if you are bad to analyze the problem I put the css, thanks for your attention
– Danilo Gonçalves
Hello Hello, I tried to put this CSS that passed me in the first option and link in my page but it is not working, I must be doing something wrong, is not possible, now regarding the second option as I change a <a> tag to <label> being that I am using an Asp control and this <a> tag only appears in the browser’s Inspect?
– Danilo Gonçalves
The first option may not be appearing because of overflow or height of some element, then the menu opens but is covered or something. The second option may be pq when you exchange the tag for Asp the CSS loses the reference, type a.class does not work pq in CSS eh label.class understands. Would you have the link to see the page? Apart from that it might be some other CSS interfering with this, try testing on separate pages to understand where and when it stops working
– hugocsl