Меню навигации слева с кнопкой закрытия и открытия в приложении бритвенных страниц ASP.NET Core - PullRequest
Новая
       14

Меню навигации слева с кнопкой закрытия и открытия в приложении бритвенных страниц ASP.NET Core

0 голосов
/ 04 сентября 2018

Я использую бритвенные страницы для своего приложения. Я попытался переместить меню навигации сверху вниз. Я выполнил шаги, упомянутые в этой ссылке , как создать боковое меню в начальной загрузке, которое остается? , поскольку я хочу, чтобы мое меню было точно таким, как показано в этой ссылке. Но я не смог добиться результата. Что-то о simple-sidebar.css упомянуто в ссылке, но я хотел бы знать, где именно и как это должно быть добавлено в мой проект бритвенных страниц. Какие изменения я должен сделать, чтобы переместить мое навигационное меню сверху вниз, как показано в ссылке, которую я упомянул, поскольку она не работает для моего проекта страниц бритвы? Подробное объяснение было бы очень полезно, так как я новичок в бритвах. Код в моем "_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>

1 Ответ

0 голосов
/ 04 сентября 2018

  1. simple-sidebar.css можно найти на [GitHb (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) и официальном сайте . См. Комментарий ответа, который вы разместили выше.

  2. Просто скачайте библиотеку и скопируйте simple-sidebar.css в wwwroot/lib/simple-sidebar/css/simple-sidebar.css.

и теперь вы можете добавить ссылку в свой макет: 

<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");
    });
});

Вот скриншот:

enter image description here

Вот полный список кодов: 

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