Как создать меню боковой панели в бутстрапе, который остается?

Я имею в виду, допустим, у меня есть пункт назначения для диспетчера с тем же названием. Я бы хотел иметь левую боковую панель с Dest1, Dest2, Dest3 items showup/hide, когда я нажимаю главное меню Destinations, но я хочу, чтобы боковая панель оставалась видимой все время, если я выбираю Dest1, Dest2 или Dest3, которые являются ссылками на разные взгляды. Пока у меня есть это в представлении индекса Destinations, но я не хочу повторять это ниже в каждом элементе в меню боковой панели. Я бы хотел, чтобы элемент боковой панели оставался подсвеченным в зависимости от того, что было выбрано. Topbar manu определяется в/-Layout view, должен ли я помещать боковую панель там тоже? благодаряКак создать меню боковой панели в бутстрапе, который остается?

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <ul class="nav navbar-fixed-side navbar-fixed-side-left"> 
       <li>@Html.ActionLink("Dest1", "Dest1", "Destinations")</li> 
       <li>@Html.ActionLink("Dest2", "Dest2", "Destinations")</li> 
       <li>@Html.ActionLink("Dest3", "Dest3", "Destinations")</li> 
      </ul> 
     </div>

.....

источник

2015-05-17 motif

Если на начальной загрузки MVC вы не 't означает это: https://www.twitterbootstrapmvc.com, то не называйте это bootstrap MVC. Ваш вопрос не имеет никакого отношения к asp.net mvc. – ataravati

Вы можете попробовать код ниже

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css?parameter=1" 
     rel="stylesheet"> 
    <%--Add the css reference here--%> 
    <link href="../css/simple-sidebar.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <script> 
     $(document).ready(function() { 
      $("#menu-toggle").click(function (e) { 
       e.preventDefault(); 
       $("#wrapper").toggleClass("active"); 
      }); 
     }); 
    </script> 
    <style> 
     #wrapper.active #sidebar-wrapper 
     { 
      left: 50px; 
     } 
    </style> 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"> 
        </span> 
       </button> 
       <a class="navbar-brand" href="/">Application name</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/About">About</a></li> 
        <li><a href="/Home/Contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content" style="margin-top: 50px"> 
    </div> 
    <div id="wrapper"> 
     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul id="sidebar_menu" class="sidebar-nav" style="text-align: right; padding-right: 10px; 
       padding-top: 10px"> 
       <li class="sidebar-brand"><a id="menu-toggle" href="#"><span id="main_icon" class="navbar-icon fa fa-bars icon"> 
       </span></a></li> 
      </ul> 
      <ul class="sidebar-nav"> 
       <li class="sidebar-brand"><a href="#">Start Bootstrap </a></li> 
       <li><a href="#">Home</a> </li> 
       <li><a href="#">About</a> </li> 
       <li><a href="#">Contact</a> </li> 
      </ul> 
     </div> 
     <!-- /#sidebar-wrapper --> 
     <!-- Page Content --> 
     <div id="page-content-wrapper"> 
      <br /> 
      <br /> 
      <hr /> 
      <footer> 
      <p>&copy; 2015 - My ASP.NET Application</p> 
     </footer> 
     </div> 
     <!-- /#page-content-wrapper --> 
    </div> 
</body> 
</html>

И это результат

And this is the result

источник

2016-03-01 07:59:55

Вы забыли указать, где взять файл simple-sidebar.css. Он доступен для загрузки 3 и 4 здесь https://startbootstrap.com/template-overviews/simple-sidebar/ – Dubrzr

Как создать меню боковой панели в бутстрапе, который остается?

ответ

Смежные вопросы