ASP.NET Core razor pages 应用程序左侧带有关闭和打开按钮的导航菜单

Question

我正在为我的应用程序使用剃须刀页面。我试图将导航菜单从顶部移动到左侧。我按照 link how to create sidebar menu in bootstrap that stays? 中提到的步骤进行操作，因为我希望我的菜单与 link 中显示的完全相同。但是我无法实现结果。 link 中提到了一些关于 simple-sidebar.css 的内容，但我想知道它应该添加到我的 razor pages 项目的确切位置和方式。我应该做哪些更改才能将我的导航菜单从顶部移动到左侧，如我提到的 link 所示，因为它不适用于我的 razor pages 项目？详细的解释会很有帮助，因为我是 razor pages 的新手。我的“_Layout.cshtml”中的代码如下所示。请帮我解决这个问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Sample</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" 
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test- 
property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append- 
version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a asp-page="/Index" class="navbar-brand">Home</a>
            <a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
        </div>
    </div>
</nav>
<div class="container body-content">
    @RenderBody()
    <footer></footer>
</div>

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous">
    </script>
    <script 
 src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && 
 window.jQuery.fn.modal"
            crossorigin="anonymous">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

@RenderSection("Scripts", required: false)
</body>
</html>

Answer 1

simple-sidebar.css 可以在 [GitHb(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) and official site 上找到。请参阅上面发布的答案的评论。
只需下载库并将simple-sidebar.css复制到wwwroot/lib/simple-sidebar/css/simple-sidebar.css。

现在您可以在布局中添加 link：

<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">

simple-sidebar 是一个非常简单的 css 库，它只需要您的 html 结构以常规方式。

<!-- your nav on top  -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a asp-page="/Index" class="navbar-brand">Home</a>
            <a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
        </div>
    </div>
</nav>

<div id="wrapper" class="toggled">

    <!-- you nav on left side -->
    <div id="sidebar-wrapper">
        <a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
        <ul class="sidebar-nav"style="margin-top:15px;">
            <li class="sidebar-brand">
                <a asp-page="/Index" class="navbar-brand">Home</a>
            </li>
            <li>
                <a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
            </li>
        </ul>
    </div>

    <!-- your main body here -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            @RenderBody()
        </div>
        <footer></footer>
    </div>
</div>

并添加一个 style 以显示导航按钮和左侧：

<style>
    #wrapper #sidebar-wrapper{
        width: 50px;
    }

    #wrapper .sidebar-nav{
        display:none;
    }

    #wrapper.toggled .sidebar-nav{
        display:block;
    }

    a#menu-toggle {
        display:inline-block;
        width: 100%;
        line-height:100%;
        padding:0;
        margin:0;
        color: dodgerblue;
    }
</style>

最后，要切换侧边栏，绑定一个函数来处理事件：

$(document).ready(function () {
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
});

截图如下：

这是完整的代码列表：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Sample</title>
    
        <link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/site.css" />
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet"
                  href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-
                  property="position" asp-fallback-test-value="absolute" />
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-
                  version="true" />
        </environment>
        <style>
            #wrapper #sidebar-wrapper{
                width: 50px;
            }
    
            #wrapper .sidebar-nav{
                display:none;
            }
    
            #wrapper.toggled .sidebar-nav{
                display:block;
            }
    
            a#menu-toggle {
                display:inline-block;
                width: 100%;
                line-height:100%;
                padding:0;
                margin:0;
                color: dodgerblue;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a asp-page="/Index" class="navbar-brand">Home</a>
                    <a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
                </div>
            </div>
        </nav>
        <div id="wrapper" class="toggled">
            <div id="sidebar-wrapper">
                <a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
                <ul class="sidebar-nav"style="margin-top:15px;">
                    <li class="sidebar-brand">
                        <a asp-page="/Index" class="navbar-brand">Home</a>
                    </li>
                    <li>
                        <a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
                    </li>
                </ul>
            </div>
    
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    @RenderBody()
                </div>
                <footer></footer>
            </div>
        </div>
    
        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn &&
     window.jQuery.fn.modal"
                    crossorigin="anonymous">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>
        <script>
            $(document).ready(function () {
                $("#menu-toggle").click(function (e) {
                    e.preventDefault();
                    $("#wrapper").toggleClass("toggled");
                });
            });
        </script>
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>

ASP.NET Core razor pages 应用程序左侧带有关闭和打开按钮的导航菜单

Navigation menu on the left side with close and open button in ASP.NET Core razor pages application

css

asp.net-core

razor-pages