Click here to Skip to main content
16,020,990 members
Search within:


Asp.net menu with navbar
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Dear all, I want to use bootstrap menu style in asp.new menu but all my try not work.

the menu i want to use is

HTML
<pre>   <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="Default.aspx">web name </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="aboutus.aspx">aboutus</a>
            </li>
           
            <li class="nav-item">
              <a class="nav-link" href="contact.html">contact</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Portfolio
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
                <a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
                <a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Blog
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
                <a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
                <a class="dropdown-item" href="blog-post.html">Blog Post</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Other Pages
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="full-width.html">Full Width Page</a>
                <a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
                <a class="dropdown-item" href="faq.html">FAQ</a>
                <a class="dropdown-item" href="404.html">404</a>
                <a class="dropdown-item" href="pricing.html">Pricing Table</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>


and my asp menu is

ASP.NET
<pre>  <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />

<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2">
 </asp:Menu>



What I have tried:

that what i try


ASP.NET
<pre>
                        <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />


        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="Default3.aspx">صندوق الزمالة </a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">

                    
                    <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" RenderingMode="List" DataSourceID="SiteMapDataSource2"
                        IncludeStyleBlock="false" StaticMenuStyle-CssClass="" DynamicMenuStyle-CssClass="">

                        <StaticSelectedStyle CssClass="nav-item nav-link" />

                        <StaticHoverStyle CssClass="nav-item nav-link"  />
                 

                    </asp:Menu>
                      
                </div>
            </div>
        </nav>
Posted
Updated 20-Sep-18 11:10am
Add a Solution
Comments
ZurdoDev 10-Sep-18 8:05am    
And what is the question?
Matias Lopez 10-Sep-18 9:39am    
We assume that you include the .css and .js needed to include BootStrap, and your code is supported in this used version, no?
Member 13336451 11-Sep-18 7:20am    
that all what i have,
Matias Lopez 11-Sep-18 13:20pm    
Bootstrap | W3Schools
And the online call:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Member 13336451 12-Sep-18 11:33am    
still this didn't work with me

1 solution

Hi there,

Assuming you do have all required references for Bootstrap 3.3.7 (js and css), as well as JQuery, just like Matias Lopez mentioned; the following code example may offer some help.

It depicts a menu with three items, where the last one is a sub-menu. For this particular case, LinkButtons were used, but if your intent is plain navigation, then you can use the HTML, and just complete the href="...". Link tags Ids may also be unnecessary in such case.

//Markup (content page .aspx)
<div id="MnuCliente" runat="server" class ="collapse navbar-collapse" >
	<ul class="nav navbar-nav">
        	<li><asp:LinkButton id="Mnu00" runat="server" Text="Datos Cliente" OnClick="Link_Click" /></li>
                <li><asp:LinkButton id="Mnu01" runat="server" Text="Operaciones" OnClick="Link_Click" /></li>
                <li class="dropdown-submenu">
                	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentosclass="caret"></a>
                        <ul class="dropdown-menu">
                            <li><asp:LinkButton id="Mnu02" runat="server" Text="Vigentes" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu03" runat="server" Text="Morosos" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu04" runat="server" Text="Cancelados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu05" runat="server" Text="Prorrogados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu06" runat="server" Text="Protestados" OnClick="Link_Click" /></li>   
                            <li><asp:LinkButton id="Mnu07" runat="server" Text="Excedentes" OnClick="Link_Click" /></li>   
                        </ul>
		</li>
	</ul>
</div>


//Rendered HTML (href="..." have been removed for brevity)
<div id="MnuClient" class="collapse navbar-collapse">

	<ul class="nav navbar-nav">
                    
		<li><a id="Mnu00" href="...">Datos Cliente</a></li>

                <li><a id="Mnu01" href="...">Operaciones</a></li>
                    
		<li class="dropdown-submenu">
                        
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documents^__b class="caret"></a>

			<ul class="dropdown-menu">

				<li><a id="Mnu02" href="...">Vigentes</a></li>
				<li><a id="Mnu03" href="...">Morosos</a></li>
				<li><a id="Mnu04" href="...">Cancelados</a></li>
				<li><a id="Mnu05" href="...">Prorrogados</a></li>
				<li><a id="Mnu06" href="...">Protestados</a></li>
				<li><a id="Mnu07" href="...">Excedentes</a></li>
			</ul>

                </li>

	</ul>
</div>


Cheers!
 
Share this answer
 
Posted
Updated 20-Sep-18 11:12am
v2
Add a Solution

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

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Asp.net - bootstrap navbar dropdown menu not working properly
Navbar menu are not showing and menu are not toggle when clicking button
Add image to a menu item in bootstrap for ASP.NET
Creating drop-down menu in the navbar .NET
Bootstrap 4 dropdown menu drops inside navbar
Change the background color of the menu bar or navbar is the bootstrap?
NavBar with active link, in div.
Maintain bootstrap navbar with fixed width
Import HTML navbar from Fireworks?
[Angularjs] - navbar dropdown menu getting overlapped inside ui-layout

Advertise
Privacy
Cookies
Terms of Use
Last Updated 3 Feb 2023
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-07-22:1

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