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

I am using razor pages for my application. I tried to move the navigation menu from top to left side. I followed the steps mentioned in this link how to create sidebar menu in bootstrap that stays? since I want my menu to be exactly as shown in that link. But I couldn't achieve the result. Something about simple-sidebar.css is mentioned in the link but I would like to know where exactly and how it should be added to my razor pages project. What changes should I make to move my navigation menu from top to left side as shown in the link that I mentioned since it is not working for my razor pages project? A detailed explanation would be really helpful as I am new to razor pages. The code in my "_Layout.cshtml" is shown below. Please help me with this issue.

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

the simple-sidebar.css can be found on [GitHb(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) and official site . See the comment of the answer you posted above .
Simply download the lib and copy thesimple-sidebar.css to wwwroot/lib/simple-sidebar/css/simple-sidebar.css .

and now you could add a link in you layout:

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

simple-sidebar is a dead simple css lib which only requires your html structure in a conventional way.

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

and add a style to show nav button and left side :

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

At last , to toggle the sidebar , bind a function to handle the event :

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

Here's a screenshot:

Here's the complete code list:

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

来源：https://stackoverflow.com/questions/52158003/navigation-menu-on-the-left-side-with-close-and-open-button-in-asp-net-core-razo

标签

css

asp.net-core

razor-pages