我想为我的 ASP.NET MVC 7 网站创建一个侧边栏

问题描述 投票：0回答：1

我想为我的网站创建一个侧边栏。我现在有一个工作侧边栏，但它在顶部使用白色条作为切换器。我想将导航栏用作侧边栏切换器。我正在使用部分布局。这是我的代码：

_Layout.cshtml-

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RecipeWebsite</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/RecipeWebsite.styles.css" asp-append-version="true" />

    <!--Added-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</head>

<body id="body-pd">

    <!--Top Nav bar-->
    <div>
        <partial name="~/Views/Shared/Navbar/_Navbar.cshtml" />
    </div>

    <!--Side bar-->
    <div>
        <partial name="~/Views/Shared/Sidebar/_Sidebar.cshtml" />
    </div>

    <!--Render Body-->
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <!--Bottom Navbar-->
    <footer class="border-top footer text-muted ps-10 align-bottom">
        <div class="container-fluid">
            &copy; 2023 - RecipeWebsite - <a asp-area="" asp-controller="Privacy" asp-action="Index">Privacy</a>
        </div>
    </footer>

    <!--JQuery-->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>

    <!--Bootstrap-->
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <!--JavaScript-->
    <script src="~/js/site.js" asp-append-version="true"></script>

    <!--JavaScript Added-->
    <script src="~/js/created/sidebar.js"></script>

    <!--CSS Added-->
    <link rel="stylesheet" href="~/css/created/sidebar.css" />

    @await RenderSectionAsync("Scripts", required: false)

</body>
</html>

_Navbar.cshtml-

<header class="header" id="header">
    <!--Sidebar Toggle-->
    <div class="header_toggle p-3"> <i class='bx bx-menu' id="header-toggle"></i> </div>

    <!--Identity-->
    <partial name="~/Views/Shared/Navbar/_Identity.cshtml" />
</header>

_Sidebar.cshtml-

<div class="l-navbar" id="nav-bar">
    <nav class="nav">
        <div>
            <a asp-controller="Home" asp-action="Index" class="nav_logo">
                <i class='bx bx-layer nav_logo-icon'></i>
                <span class="nav_logo-name">RecipeWebsite</span>
            </a>

            <div class="nav_list">
                <a asp-controller="Home" asp-action="Index" class="nav_link active">
                    <i class='bx bx-home nav_icon'></i>
                    <span class="nav_name">Home</span>
                </a>
                <a asp-controller="Home" asp-action="Privacy" class="nav_link">
                    <i class='bx bx-user nav_icon'></i>
                    <span class="nav_name">Privacy Policy</span>
                </a>
                <a asp-controller="Post" asp-action="Index" class="nav_link">
                    <i class='bx bx-bookmark nav_icon'></i>
                    <span class="nav_name">Recipe Post</span>
                </a>
                <a asp-controller="Collection" asp-action="Index" class="nav_link">
                    <i class='bx bx-folder nav_icon'></i>
                    <span class="nav_name">Recipe Collection</span>
                </a>
            </div>
        </div>
    </nav>
</div>

sidebar.css-

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

:root {
    --header-height: 3rem;
    --nav-width: 68px;
    --first-color: #4723D9;
    --first-color-light: #AFA5D9;
    --white-color: #F7F6FB;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100
}

*, ::before, ::after {
    box-sizing: border-box
}

body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s
}

a {
    text-decoration: none
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    padding-top: 100px;
    background-color: var(--white-color);
    z-index: var(--z-fixed);
    transition: .5s
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

    .header_img img {
        width: 40px
    }

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.nav_logo, .nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem
}

.nav_logo {
    margin-bottom: 2rem
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--first-color-light);
    margin-bottom: 1.5rem;
    transition: .3s
}

    .nav_link:hover {
        color: var(--white-color)
    }

.nav_icon {
    font-size: 1.25rem
}

.show {
    left: 0
}

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem)
}

.active {
    color: var(--white-color)
}

    .active::before {
        content: '';
        position: absolute;
        left: 0;
        width: 2px;
        height: 32px;
        background-color: var(--white-color)
    }

.height-100 {
    height: 100vh
}

@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }

    .header_img {
        width: 40px;
        height: 40px
    }

        .header_img img {
            width: 45px
        }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }

    .show {
        width: calc(var(--nav-width) + 156px)
    }

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px)
    }
}

sidebar.js-

document.addEventListener("DOMContentLoaded", function (event) {

    const showNavbar = (toggleId, navId, bodyId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId)

        // Validate that all variables exist
        if (toggle && nav && bodypd && headerpd) {
            toggle.addEventListener('click', () => {
                // show navbar
                nav.classList.toggle('show')
                // change icon
                toggle.classList.toggle('bx-x')
                // add padding to body
                bodypd.classList.toggle('body-pd')
                // add padding to header
                headerpd.classList.toggle('body-pd')
            })
        }
    }

    showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

    /*===== LINK ACTIVE =====*/
    const linkColor = document.querySelectorAll('.nav_link')

    function colorLink() {
        if (linkColor) {
            linkColor.forEach(l => l.classList.remove('active'))
            this.classList.add('active')
        }
    }
    linkColor.forEach(l => l.addEventListener('click', colorLink))

    // Your code to run since DOM is loaded and ready
});

我尝试仅使用导航栏中的切换器选项，但它不起作用。我引用了多个代码，但总感觉我错过了一些东西。

谢谢您的帮助

javascript html css asp.net-core-mvc sidebar
1个回答
0
投票

我的问题解决了。这就是我所做的-

<header style="padding-top:70px;" id="header">

    <nav class="navbar navbar-expand navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 ps-10 fixed-top">
        <div class="container-fluid">

            <!--Toggler-->
            <div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div>

            <!--Website Title-->
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">RecipeWebsite</a>

            <!--Options-->
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between ps-3">

                <!--Search bar-->
                <form class="d-flex w-50 me-5" role="search" asp-controller="Searchbar" asp-action="Index">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="SearchString" required oninvalid="this.setCustomValidity(' ')" />
                    <button class="btn btn-outline-success" type="submit">Search</button>
                    <div class="invalid-feedback"></div>
                </form>

                <!--Identity-->
                <partial name="~/Views/Shared/Navbar/_Identity.cshtml" />

            </div>
        </div>
    </nav>

</header>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.