ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Bootstrap Responsive ASP.Net Menu Child elements not displaying on MouseOver<p>Hey <a class="username" rel="baits">baits</a>,</p> <p>Please refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;div&gt; &lt;div&gt; &lt;div class=&#34;navbar navbar-default&#34;&gt; &lt;div class=&#34;container-fluid&#34;&gt; &lt;div class=&#34;navbar-header&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;navbar-toggle collapsed&#34; data-toggle=&#34;collapse&#34; data-target=&#34;#bs-example-navbar-collapse-1&#34; aria-expanded=&#34;false&#34;&gt; &lt;span class=&#34;sr-only&#34;&gt;Toggle navigation&lt;/span&gt; &lt;span class=&#34;icon-bar&#34;&gt;&lt;/span&gt;&lt;span class=&#34;icon-bar&#34;&gt;&lt;/span&gt;&lt;span class=&#34;icon-bar&#34;&gt;&lt;/span&gt; &lt;/button&gt; &lt;a class=&#34;navbar-brand&#34; href=&#34;#&#34;&gt;ASPSnippets&lt;/a&gt; &lt;/div&gt; &lt;div class=&#34;collapse navbar-collapse&#34; id=&#34;bs-example-navbar-collapse-1&#34;&gt; &lt;asp:Menu ID=&#34;Menu1&#34; runat=&#34;server&#34; Orientation=&#34;Horizontal&#34; RenderingMode=&#34;List&#34; IncludeStyleBlock=&#34;false&#34; StaticMenuStyle-CssClass=&#34;nav navbar-nav&#34; DynamicMenuStyle-CssClass=&#34;dropdown-menu&#34;&gt; &lt;/asp:Menu&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr /&gt; &lt;/div&gt; &lt;/div&gt; &lt;link rel=&#34;stylesheet&#34; href=&#39;http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css&#39; media=&#34;screen&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#39;http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js&#39;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#39;http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js&#39;&gt;&lt;/script&gt; &lt;style type=&#34;text/css&#34;&gt; .dropdown-submenu { position: relative; } .dropdown-submenu &gt; .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu &gt; a:after { display: block; content: &#34; &#34;; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #cccccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover &gt; a:after { border-left-color: #555; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left &gt; .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34;&gt; //Disable the default MouseOver functionality of ASP.Net Menu control. // Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () { // return false; // }; $(function () { $(&#34;.navbar-nav li, .navbar-nav a, .navbar-nav ul&#34;).removeAttr(&#39;style&#39;); $(&#34;.dropdown-menu&#34;).closest(&#34;li&#34;).removeClass().addClass(&#34;dropdown-toggle&#34;); $(&#34;.dropdown-toggle&#34;).find(&#34;a[href=&#39;javascript:;&#39;]&#34;).attr(&#34;data-toggle&#34;, &#34;dropdown&#34;); $(&#34;.dropdown-toggle&#34;).find(&#34;a[href=&#39;javascript:;&#39;].level1&#34;).append(&#34;&lt;span class=&#39;caret&#39;&gt;&lt;/span&gt;&#34;); $(&#34;.dropdown-toggle&#34;).find(&#34;a[href=&#39;javascript:;&#39;]:not(.level1)&#34;).closest(&#39;li&#39;).addClass(&#39;dropdown-submenu&#39;); $(&#34;a.selected&#34;).closest(&#34;li&#34;).addClass(&#34;active&#34;); $(&#34;a.selected&#34;).closest(&#34;.dropdown-toggle&#34;).addClass(&#34;active&#34;); $(&#39;ul.dropdown-menu [data-toggle=dropdown]&#39;).on(&#39;click&#39;, function (event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass(&#39;open&#39;); $(this).parent().toggleClass(&#39;open&#39;); }); }); &lt;/script&gt;</pre> <p><span style="text-decoration: underline;"><strong>Namespaces</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data; using System.Data.SqlClient; using System.Configuration; using System.IO;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data Imports System.IO Imports System.Data.SqlClient</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = this.GetData(); PopulateMenu(dt); } } private DataTable GetData() { string query = &#34;SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]&#34;; string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { DataTable dt = new DataTable(); using (SqlCommand cmd = new SqlCommand(query)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.CommandType = CommandType.Text; cmd.Connection = con; sda.SelectCommand = cmd; sda.Fill(dt); } } return dt; } } private void PopulateMenu(DataTable dt) { string currentPage = Path.GetFileName(Request.Url.AbsolutePath); DataView view = new DataView(dt); view.RowFilter = &#34;ParentMenuId=0&#34;; foreach (DataRowView row in view) { MenuItem menuItem = new MenuItem { Value = row[&#34;MenuId&#34;].ToString(), Text = row[&#34;Title&#34;].ToString(), NavigateUrl = row[&#34;Url&#34;].ToString(), Selected = row[&#34;Url&#34;].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase) }; Menu1.Items.Add(menuItem); AddChildItems(dt, menuItem); } } private void AddChildItems(DataTable table, MenuItem menuItem) { DataView viewItem = new DataView(table); viewItem.RowFilter = &#34;ParentMenuId=&#34; + menuItem.Value; foreach (DataRowView childView in viewItem) { MenuItem childmenuItem = new MenuItem { Value = childView[&#34;MenuId&#34;].ToString(), Text = childView[&#34;Title&#34;].ToString(), NavigateUrl = childView[&#34;Url&#34;].ToString(), }; menuItem.ChildItems.Add(childmenuItem); AddChildItems(table, childmenuItem); } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load If Not Me.IsPostBack Then Dim dt As DataTable = Me.GetData() PopulateMenu(dt) End If End Sub Private Function GetData() As DataTable Dim query As String = &#34;SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]&#34; Dim constr As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using con As SqlConnection = New SqlConnection(constr) Dim dt As DataTable = New DataTable() Using cmd As SqlCommand = New SqlCommand(query) Using sda As SqlDataAdapter = New SqlDataAdapter() cmd.CommandType = CommandType.Text cmd.Connection = con sda.SelectCommand = cmd sda.Fill(dt) End Using End Using Return dt End Using End Function Private Sub PopulateMenu(ByVal dt As DataTable) Dim currentPage As String = Path.GetFileName(Request.Url.AbsolutePath) Dim view As DataView = New DataView(dt) view.RowFilter = &#34;ParentMenuId=0&#34; For Each row As DataRowView In view Dim menuItem As MenuItem = New MenuItem With { .Value = row(&#34;MenuId&#34;).ToString(), .Text = row(&#34;Title&#34;).ToString(), .NavigateUrl = row(&#34;Url&#34;).ToString(), .Selected = row(&#34;Url&#34;).ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase) } Menu1.Items.Add(menuItem) AddChildItems(dt, menuItem) Next End Sub Private Sub AddChildItems(ByVal table As DataTable, ByVal menuItem As MenuItem) Dim viewItem As DataView = New DataView(table) viewItem.RowFilter = &#34;ParentMenuId=&#34; &amp; menuItem.Value For Each childView As DataRowView In viewItem Dim childmenuItem As MenuItem = New MenuItem With { .Value = childView(&#34;MenuId&#34;).ToString(), .Text = childView(&#34;Title&#34;).ToString(), .NavigateUrl = childView(&#34;Url&#34;).ToString() } menuItem.ChildItems.Add(childmenuItem) AddChildItems(table, childmenuItem) Next End Sub</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><span style="text-decoration: underline;"><strong><img src="https://imgur.com/0VYMGzk.gif" alt="" width="352" height="320" /></strong></span></p>https://www.aspforums.net:443/Threads/270381/Bootstrap-Responsive-ASPNet-Menu-Child-elements-not-displaying-on-MouseOver/https://www.aspforums.net:443/Threads/270381/Bootstrap-Responsive-ASPNet-Menu-Child-elements-not-displaying-on-MouseOver/Fri, 07 Dec 2018 05:31:06 GMT