Bootstrap Responsive ASP.Net Menu Child elements not displaying on MouseOver

Last Reply one month ago By pandeyism

Posted one month ago

Bootstrap Responsive ASP.Net Menu control for Mobile Phone Tablet and Desktop display

I made this exactly this way, but there are no child elements displayed on mouseover :-( I know they are there, because if I remove the javascript, it works fine, but not in mobile mode of course. Arrows are also not displayed?

Posted one month ago

Hey baits,

Please refer below sample.

HTML

<div>
    <div>
        <div class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">ASPSnippets</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
                        IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
                    </asp:Menu>
                </div>
            </div>
        </div>
        <hr />
    </div>
</div>
<link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<style type="text/css">
    .dropdown-submenu
    {
        position: relative;
    }
    .dropdown-submenu > .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 > a:after
    {
        display: block;
        content: " ";
        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 > a:after
    {
        border-left-color: #555;
    }
    .dropdown-submenu.pull-left
    {
        float: none;
    }
    .dropdown-submenu.pull-left > .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;
    }
</style>
<script type="text/javascript">
    //Disable the default MouseOver functionality of ASP.Net Menu control.
    //        Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
    //            return false;
    //        };
    $(function () {
        $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
        $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
        $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
        $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
        $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
        $("a.selected").closest("li").addClass("active");
        $("a.selected").closest(".dropdown-toggle").addClass("active");
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
</script>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;

VB.Net

Imports System.Data
Imports System.IO
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData();
        PopulateMenu(dt);
    }
}

private DataTable GetData()
{
    string query = "SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]";
    string constr = ConfigurationManager.ConnectionStrings["constr"].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 = "ParentMenuId=0";
    foreach (DataRowView row in view)
    {
        MenuItem menuItem = new MenuItem
        {
            Value = row["MenuId"].ToString(),
            Text = row["Title"].ToString(),
            NavigateUrl = row["Url"].ToString(),
            Selected = row["Url"].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 = "ParentMenuId=" + menuItem.Value;
    foreach (DataRowView childView in viewItem)
    {
        MenuItem childmenuItem = new MenuItem
        {
            Value = childView["MenuId"].ToString(),
            Text = childView["Title"].ToString(),
            NavigateUrl = childView["Url"].ToString(),
        };
        menuItem.ChildItems.Add(childmenuItem);
        AddChildItems(table, childmenuItem);
    }
}

VB.Net

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 = "SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").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 = "ParentMenuId=0"
    For Each row As DataRowView In view
        Dim menuItem As MenuItem = New MenuItem With {
            .Value = row("MenuId").ToString(),
            .Text = row("Title").ToString(),
            .NavigateUrl = row("Url").ToString(),
            .Selected = row("Url").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 = "ParentMenuId=" & menuItem.Value
    For Each childView As DataRowView In viewItem
        Dim childmenuItem As MenuItem = New MenuItem With {
            .Value = childView("MenuId").ToString(),
            .Text = childView("Title").ToString(),
            .NavigateUrl = childView("Url").ToString()
        }
        menuItem.ChildItems.Add(childmenuItem)
        AddChildItems(table, childmenuItem)
    Next
End Sub

Screenshot