如何在Bootstrap中创建保留状态的侧边栏菜单? [英] How to create a sidebar menu in Bootstrap that retains state?
问题描述
如果我有一个控制器-Destinations，并且具有相同名称的topbar菜单.我想在左侧栏上显示Dest1，Dest2，Dest3项目，这些项目在我单击目标"顶部菜单时会显示/隐藏.但是，如果我选择链接到不同视图的Dest1，Dest2或Dest3，则希望边栏始终保持可见.到目前为止，我在目的地"索引视图中具有此功能，但是我不想在侧边栏菜单中的每个项目下重复此操作. 我也想根据选择的内容将侧边栏项目保持突出显示. Topbar菜单是在/-Layout视图中定义的，我也应该在其中放置侧边栏吗?谢谢.
If I have a controller - Destinations, with topbar menu with the same name. I'd like to have a left sidebar with Dest1, Dest2, Dest3 items that showup/hide when I click the Destinations top menu. However, I want the sidebar to stay visible all the time if I choose Dest1, Dest2 or Dest3 which are links to different views. So far I have this in Destinations index view but but I don't want to repeat this below in every item in a sidebar menu. I'd like to also sidebar item remained highlighted depending on what was selected. Topbar menu is defined in /-Layout view, should I put side bar there too? Thanks.
<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>
.....
推荐答案
您可以尝试以下代码
<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>© 2015 - My ASP.NET Application</p>
</footer>
</div>
<!-- /#page-content-wrapper -->
</div>
</body>
</html>
这就是结果
这篇关于如何在Bootstrap中创建保留状态的侧边栏菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
