Click here to Skip to main content
14,210,100 members
Rate this:
Please Sign up or sign in to 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

<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

<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


<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
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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">Documentos</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</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!
   
v2

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



Advertise | Privacy | Cookies | Terms of Service
Web05 | 2.8.190617.3 | Last Updated 20 Sep 2018
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100