Click here to Skip to main content
14,700,124 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:

In my Web application, In my Site.Master page I have a menu and want to have a horizontal Sub-Menu on click of the menu. Below is my div of navbar.

<br />
<pre lang="xml"><div class="navbar navbar-inverse navbar-fixed-top"><br />
            <div class="container"><br />
                <div class="navbar-header"><br />
                    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;<br />
                        <span class="icon-bar"></span><br />
                        <span class="icon-bar"></span><br />
                        <span class="icon-bar"></span><br />
                    &lt;/button&gt;<br />
                    <p><br />
                    &lt;a class="navbar-brand"  runat="server" href="~/"&gt;My APp<br />
                    &lt;asp:Image ID="Image1" ImageAlign="Middle" runat="server" ImageUrl="~/Images/TCLogo.png" Height="26" Width="26" /&gt;<br />
                        </p><br />
                </div><br />
                <div class="navbar-collapse collapse"><br />
                    &lt;asp:LoginView runat="server" ID="logView" ViewStateMode="Disabled"&gt;<br />
                        <anonymoustemplate><br />
                            <ul class="nav navbar-nav navbar-right"><br />
                                <li>&lt;a  runat="server" href="~/Account/Login"&gt;Log in</li><br />
                            </ul><br />
                        </anonymoustemplate><br />
                        <loggedintemplate><br />
                            &lt;asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"<br />
                                IncludeStyleBlock="false" Orientation="Horizontal"<br />
                                 CssClass="navbar navbar-fixed-top"<br />
                                 StaticMenuStyle-CssClass="nav navbar-nav"<br />
                                 StaticSelectedStyle-CssClass="active"<br />
                                 DynamicMenuStyle-CssClass="dropdown-menu" &gt;<br />
                                <items><br />
                                    &lt;asp:MenuItem Text="Home" ToolTip="Home"&gt;<br />
                                    &lt;asp:MenuItem Text="Projects" ToolTip="Channels PAge" NavigateUrl="~/LoggedPages/ChannelsForm.aspx"&gt;<br />
                                        &lt;asp:MenuItem Text="Add" ToolTip="Cusomters" NavigateUrl="~/LoggedPages/CustomersForm.aspx"&gt;<br />
                                        &lt;asp:MenuItem Text="Edit" ToolTip="Inquiry" NavigateUrl="~/LoggedPages/InquiryForm.aspx"&gt;<br />
                                        &lt;asp:MenuItem Text="Info" ToolTip="Project Details" NavigateUrl="~/LoggedPages/ProjectDetailsForm.aspx"&gt;<br />
<br />
<br />
                                </items><br />
<br />
<br />
<br />
&lt;%--                            <ul class="nav navbar-nav"><br />
                               &lt;% if (VincitoreCRMApplication.CommonUtilities.IsCurrentUserAdmin)<br />
                                   { %&gt;<br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Project</li><br />
                                <li>&lt;a  runat="server" href="~/Inquiries/Default.aspx"&gt;Inquiry</li><br />
                                <li>&lt;a  runat="server" href="~/Channels/Default.aspx"&gt;Channels</li><br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Transactions</li><br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Reports</li><br />
                                <li>&lt;a  runat="server" href="~/Views/Reports/ReportsHome.aspx"&gt;Forms</li><br />
&lt;%--                                <li> &lt;asp:HyperLink runat="server" id="adminLink" NavigateUrl="~/Admin/Admin_Page.aspx"&gt;Admin  </li>--<br />
                               &lt;% } else { %&gt;<br />
                                <li>&lt;a  runat="server" href="~/LoggedPages/ProjectSelectForm.aspx"&gt;Projects</li><br />
                                <li>&lt;a  runat="server" href="~/Inquiries/Default.aspx"&gt;Inquiry</li><br />
                                <li>&lt;a  runat="server" href="~/Customers/Default.aspx"&gt;Customers</li><br />
                                <li>&lt;a  runat="server" href="~/Channels/Default.aspx"&gt;Channels</li>--%<br />
                                &lt;% } %&gt;<br />
                            </ul>--%&gt;<br />
<br />
                             <ul class="nav navbar-nav navbar-right"><br />
                                <li>&lt;a  runat="server" href="~/Account/Manage" title="Manage your account" &gt;Hello, &lt;%: Context.User.Identity.Name  %&gt; !</li><br />
                                <li><br />
                                    &lt;asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" /&gt;<br />
                                </li><br />
                           </ul><br />
                        </loggedintemplate><br />
<br />
                </div><br />
            </div><br />
        </div</pre><br />
><br />
<br />

As the code says, In my navbar, I have a header, a logo & then comes the menu items. And on extreme right is the collapse menu & Login/Logout options. With the commented menu i.e. of ul, I am not able to add horizontal sub-menu. I tried adding but it comes vertical and stays static I mean doesn't appear only when user clicks particular menu item.
I tried using <asp:Menu> with that, I can add sub-menu, but I face certain issues with it : (1) The sub-menu comes vertical only (2) The menu itself comes at the extreme left - so it appears on top of header title & logo. I want it to appear after that like
    appears. (3) The Menuitem doesn't appear in Collapse menu.

      or <asp:Menu> I am not able to set up it properly. I looked around on various articles, but can't find a solution for this.

      Can you please help me with this. I am new for web Development. Any help is highly appreciated.


Sorry, but somehow the code is not appearing properly in the question. Can't make out why ??
Updated 26-Apr-15 5:34am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900