如何在引导程序中创建侧边栏菜单？

Question

如何在引导程序中创建侧边栏菜单？

mot*_*tif 1 asp.net-mvc razor twitter-bootstrap

我的意思是说我有控制器目的地与顶部菜单具有相同的名称.当我点击Destinations顶部菜单时,我想要一个带有Dest1,Dest2,Dest3项目的左侧边栏showdu/hide,但我希望侧边栏始终保持可见,如果我选择Dest1,Dest2或Dest3链接到不同意见.到目前为止,我在目的地索引视图中有这个,但我不想在侧栏菜单中的每个项目中重复此操作.我还想根据选择的内容突出显示侧边栏项目.Topbar manu在/ -Layout视图中定义,我应该在那里放置侧栏吗？谢谢

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

Run Code Online (Sandbox Code Playgroud)

.....

Answer 1

Yit*_*erg 5

您可以尝试使用以下代码

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

Run Code Online (Sandbox Code Playgroud)

这就是结果

您忘了提到在哪里可以获取simple-sidebar.css文件。它可用于引导程序3＆4，网址为https://startbootstrap.com/template-overviews/simple-sidebar/ (2认同)

归档时间：	10 年，7 月前
查看次数：	28568 次
最近记录：	6 年，1 月前