N-Level (MultiLevel) Bootstrap DropDown Responsive ASP.Net Menu control for Mobile Phone, Tablet and Desktop display

Last Reply on Dec 10, 2017 10:13 PM By dharmendr

Posted on Dec 07, 2017 12:50 PM

Hello friend implement your responsive menu published as indicated by the title of the question and the question I ask is if you have a solution that you can share to have two or more menus with your submenu, such as the menu of services. Thanks for your input and hopefully you can support me because your menu seems very well done and very nice to the design of systems.

Greetings from Mexico.

Posted on Dec 08, 2017 01:31 PM
Dear ANDRADE, thank you for your solution to my question regarding the dynamic responsive menu. I commented to implement and run without problems only that I see the main options but not the submenu icon in those that contain sub menu. I add an image of how it looks like that, like the table and I copy the source code of the master page. I hope you can support me by telling me what I'm doing wrong to correct my code and that my menu looks like your solution.

I thank you in advance and I remain aware of your comments on this. Greetings from Mexico
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Gruas.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    <form id="form1" runat="server">
    <style type="text/css">
            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;
            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;
    <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>
    <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"
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
                <a class="navbar-brand" href="#">ASPSnippets</a>
            <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">
    <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-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
            $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
            $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
    <hr />
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">


Posted on Dec 07, 2017 12:50 PM