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>
