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

Last Reply 7 months ago By dharmendr

Posted 7 months ago

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 7 months ago
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">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
<div>
    <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>
    <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"
                    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>
    <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>
    <hr />
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>