ASP.NET折りたたみ式ナビゲーションバー

Question

それは、モバイルデバイスで使用できるように、私はトラブル私のウェブサイトの折りたたみ可能にナビゲーションバーを作るを持っています

これは私のナビゲーションバーのコードです：

<div style="padding-bottom: 50px;"> 
     <header id="main-header"> 
      <div class="container"> 
       <a href="@Url.Action("Index", "Home")"> 

        <img src="~/ToDo_logo1.png" id="logo" alt="logo" style="width:140px; height:50px;" /> 
       </a> 
       <nav class="main-nav" role="navigation"> 
        <ul> 
         @if (User.IsInRole("Admin")) 
         { 

          <li class="@(ViewBag.Linktext == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li> 
          <li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li> 
          <li class="@(ViewBag.Linktext == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li> 
          <li class="@(ViewBag.Linktext == "Admin" ? "current" : "")">@Html.ActionLink("Admin", "Admin", "Home")</li> 

          @Html.Partial("_LoginPartial") 
         } 

         else 
         { 
          <li class="@(ViewBag.Linktext == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li> 
          <li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li> 
          <li class="@(ViewBag.Linktext == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li> 

          <li>@Html.Partial("_LoginPartial")</li> 
         } 
        </ul> 
       </nav> 
      </div> 
     </header> 
    </div> 

付きこのコードではナビゲーションリンクが消えてしまいますが、折りたたみナビゲーションバーアイコンをリンクに表示することはできません。

あなたが任意のより多くのコードを確認する必要がある場合だけ、次は折りたたみ可能なツールバーや物事を表示するためにいくつかのユーザー認証済みのテストおよび削除することができ、他のものを提供します/と遊ぶブートストラップ3とMVCを使用して

Answer 1

を尋ねます。

<div class="navbar navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle navbar-inverse" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar navbar-inverse"></span> 
        <span class="icon-bar navbar-inverse"></span> 
        <span class="icon-bar navbar-inverse"></span> 
       </button> 
       @Html.ActionLink("MY SITE NAME ", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" id="dropdownCommonMenu" data-toggle="dropdown">Content</a> 
         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCommonMenu"> 
          @if (Request.IsAuthenticated) 
          { 

           if (User.IsInRole("YourRoleToCheck")) 
           { 
            <li role="menuitem" class="nav-header text-info">Admin Tools</li> 
            <li role="menuitem">@Html.ActionLink("Customers", "Index", "AspNetUsers")</li> 
            <li role="menuitem">@Html.ActionLink("Suasages", "Index", "Sausages")</li> 
            <li role="menuitem">@Html.ActionLink("Spiders", "Index", "Spiders")</li> 
            <li role="menuitem">@Html.ActionLink("Reports", "Index", "Reports")</li> 
            <li role="menuitem" class="divider"></li> 
           } 
           if (User.IsInRole("AnotherRoleTest")) 
           { 
            <li role="menuitem" class="nav-header text-info">Managers Only</li> 
            <li role="menuitem">@Html.ActionLink("Users", "ManageIndex", "AspNetUsers")</li> 
            <li role="menuitem" class="divider"></li> 
           } 
           if (User.IsInRole("AnotherRoleToTest")) 
           { 
            <li role="menuitem" class="nav-header text-info">Supervisor Stuff</li> 
            <li role="menuitem">@Html.ActionLink("Technician", "TechnicianIndex", "Technician")</li> 
           } 
          } 
          else 
          { 
           <li role="menuitem" class="nav-header text-danger">You must be Logged in</li> 
          } 
         </ul> 
        </li>      
        <li>@Html.ActionLink("Help", "Contact", "Home")</li> 
        @*<li>@Html.ActionLink("About", "About", "Home")</li>*@ 
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div> 
     </div> 
    </div>