[ad_1]
親愛なる、私は asp.new メニューでブートストラップ メニュー スタイルを使用したいのですが、私の試みはすべてうまくいきません。
使いたいメニューは
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>
私のASPメニューは
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>
私が試したこと：
私がしようとしていること
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>
解決策 1
やあ、
Matias Lopez が述べたように、Bootstrap 3.3.7 (js および css) と JQuery に必要なすべての参照があると仮定します。 次のコード例が参考になるかもしれません。
これは 3 つの項目を持つメニューを示しており、最後の項目はサブメニューです。 この特定のケースでは、LinkButtons が使用されましたが、目的が単純なナビゲーションである場合は、HTML を使用して、 href=”https://www.codeproject.com/Questions/1259568/…”. このような場合、リンクタグ ID も必要ない場合があります。
//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="https://www.codeproject.com/Questions/1259568/..." 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>
乾杯！
[ad_2]
コメント