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

后端未结

关注

 1  514

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 b

相关标签:

1条回答

鱼传尺愫

2021-01-24 12:22

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>

0 讨论(0)