asp.net mvc - How to create a sidebar menu in Bootstrap that retains state?

Question

Welcome To Ask or Share your Answers For Others

asp.net mvc - How to create a sidebar menu in Bootstrap that retains state?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

asp.net mvc - How to create a sidebar menu in Bootstrap that retains state?

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>

.....

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:18:23+0000

You can try with the below code

<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

Categories

asp.net mvc - How to create a sidebar menu in Bootstrap that retains state?

asp.net mvc - How to create a sidebar menu in Bootstrap that retains state?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags