如何使用 Bootstrap 5 制作类似 Gmail 的响应式侧边导航？

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

如何在 Blazor Server 应用程序（.net 6 Blazor Server）中制作我的侧边菜单，就像 Gmail 的左侧菜单一样，首先只显示图标，将鼠标悬停在菜单上会展开菜单并显示名称，而不缩小主体范围部分？我已经包含了我当前的菜单和 CSS 文件。

这是我当前的菜单：

左侧导航菜单

这是 NavMenu.razor：

<main class="sidebarmain">
    
    <div class="flex-shrink-0 p-3" style="width: 280px;">
        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
            <svg class="bi me-2" width="30" height="24">
                <use xlink:href="#bootstrap"></use>
            </svg>
            @*<span class="fs-5 fw-semibold">Collapsible</span>*@
        </a>
        <ul class="list-unstyled ps-0">
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
                    Home
                </button>
                <div class="collapse show" id="home-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        @* <li>
                            <a href="/" class="link-dark rounded">Dashboard</a>
                        </li> *@
                        <li>
                            <NavLink href="/" class="link-dark rounded">Dashboard</NavLink>
                        </li>
                        
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
                    Orders
                </button>
                <div class="collapse" id="dashboard-collapse" style="">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        @* <li>
                            <a href="/orders" class="link-dark rounded">Order List</a>
                        </li> *@
                        <li>
                            <NavLink href="/orderlist" class="link-dark rounded" Match="NavLinkMatch.Prefix">Order List</NavLink>
                        </li>
                        @* <li>
                            <a href="/upload" class="link-dark rounded">File Upload/Download</a>
                        </li> *@
                        <li>
                            <NavLink href="/upload" class="link-dark rounded" Match="NavLinkMatch.Prefix">File Upload/Download</NavLink>
                        </li>
                       @*  <li>
                            <a href="/report" class="link-dark rounded">Report</a>
                        </li> *@
                        <li>
                            <NavLink href="/report" class="link-dark rounded" Match="NavLinkMatch.All">Report</NavLink>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#vendors-collapse" aria-expanded="false">
                    Vendors
                </button>
                <div class="collapse" id="vendors-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/vendors" class="link-dark rounded">Vendor Management</a>
                        </li>
                        
                    </ul>
                </div>
            </li>
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customers-collapse" aria-expanded="false">
                    Customers
                </button>
                <div class="collapse" id="customers-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/customers" class="link-dark rounded">Customer Management</a>
                        </li>
                    </ul>
                </div>
            </li>
            <AuthorizeView Roles="Administrators">
                <li class="border-top my-3" id="admin"></li>
            <li class="mb-1">
                <button id="administrator" class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
                    Administration
                </button>
                <div class="collapse" id="account-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        <li>
                            <a href="/administration" class="link-dark rounded">User Management</a>
                        </li>
                        <li>
                                <a href="/warehouseaddress" class="link-dark rounded">Warehouse Management</a>
                        </li>
                        
                    </ul>
                </div>
            </li>
            </AuthorizeView>
        </ul>
    </div>
</main>

这是MainLayout.razor：

@inherits LayoutComponentBase
<PageTitle>Vorlance</PageTitle>
<style>
    .pb-3,
    .py-3 {
        padding-bottom: 0.93rem !important;
    }
</style>
<div class="page">
    <div class="sidebar @NavMenuCssClass">
        <NavMenu />
    </div>
    <main>
        <div class="top-row px-4 auth navbar-light">
            <div class="container-fluid toggler-container">
                <button title="Navigation menu" class="navbar-toggler custom-toggler" @onclick="ToggleNavMenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <span class="navbar-brand mx-auto" href="#">
                    <img src="/css/images/logo.png" alt="" width="220" height="73" >
                </span>
                
            </div> 
            @*<a href="Identity/Account/Register">Register</a>
            <a href="Identity/Account/Login">Log in</a>*@
            <LoginDisplay/>
         
        </div>
        <article class="content px-4">
            @Body
            <RadzenDialog />
            <RadzenNotification/>
        </article>
    </main>
</div>
@code {
    private bool collapseNavMenu = true;
    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

这是侧边栏.css：

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}
/*main {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}*/
.sidebarmain {
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    height: -webkit-fill-available;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #ced0da !important;
}
.b-example-divider {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.bi {
  vertical-align: -.125em;
  pointer-events: none;
  fill: currentColor;
}
.dropdown-toggle { outline: 0; }
.nav-flush .nav-link {
  border-radius: 0;
}
.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, .65);
  background-color: transparent;
  border: 0;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, .85);
  background-color: #679fd2;
}
#administrator:hover, #administrator:focus {
    color: rgba(0, 0, 0, .85);
    background-color: #ff0000;
}
.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}
.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}
.btn-toggle-nav a {
  display: inline-flex;
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #98dbe8;
}
.scrollarea {
  overflow-y: auto;
}
.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }
#admin {
    border-top: 0.1rem solid white !important;
}

这是我想用 Bootstrap 5 实现的 Gmail 左侧菜单：

Gmail 左侧菜单

更新：

我一开始可以显示图标，但无法将侧边栏扩展到主区域。

最初只有侧边栏图标

这是添加的CSS：

/* Sidebar */

.sidebar {
    position: fixed; /* Make the sidebar fixed */
    top: 0 !important;
    left: 0;
    height: 100% !important; /* Full height */
    z-index: 100 !important; /* Ensure it is above other content */
    background-color: #ced0da; /* Background color */
    transition: width 0.3s;
}

/* Initial state: only icons are visible */

.sidebar.collapsed {
    width: 45px; /* Adjust width as needed */
    transition: width 0.3s;
}

.sidebar.collapsed a {
    display: flex !important;
    align-items: center !important;
}

.sidebar.collapsed a span {
    display: none;
    display: flex !important;
    align-items: center !important;
}

.sidebar.collapsed a i {
    
    margin-right: 15px !important;
    margin-left: -27px !important; /* Move the icon more to the left */
}


/* Expanded state: icons and text are visible */

.sidebar.expanded {
    width: 250px; /* Adjust width as needed */
    transition: width 0.3s;
}

.sidebar.expanded a {
    display: flex !important;
    align-items: center !important;
}

.sidebar.expanded a span {
    display: none;
    display: flex !important;
    align-items: center !important;
}

.sidebar.expanded a i {
    margin-right: 15px !important;
    margin-left: -27px !important; /* Move the icon more to the left */
}

.sidebar:hover {
    width: 250px; /* Adjust width as needed */
}
css asp.net-core bootstrap-5 blazor-server-side
1个回答
0
投票

让我告诉你我是如何成功的，也许有人会需要它。

首先我将 NavMenu.razor 更改为：

<div class="sBar">
    <ul class="list-unstyled ps-0 mt-5">


        <li>
            <a href="/" class="link-dark rounded">
                <i class="fas fa-tachometer-alt"></i> <span>Dashboard</span>
            </a>
        </li>


        <li>
            <a href="/orderlist" class="link-dark rounded nav-link-flex" Match="NavLinkMatch.Prefix">
                <i class="fas fa-list"></i> <span>Order List</span>
            </a>
        </li>

        <li>
            <a href="/upload" class="link-dark rounded nav-link-flex" Match="NavLinkMatch.Prefix">
                <i class="fas fa-upload"></i> <span>File Upload/Download</span>
            </a>
        </li>

        <li>
            <a href="/report" class="link-dark rounded nav-link-flex" Match="NavLinkMatch.All">
                <i class="fas fa-chart-bar"></i> <span>Report</span>
            </a>
        </li>


        <li>

            <a href="/vendors" class="link-dark rounded nav-link-flex">
                <i class="fas fa-industry"></i> <span>Vendor Management</span>
            </a>
        </li>


        <li>
            <a href="/customers" class="link-dark rounded nav-link-flex">
                <i class="fas fa-users"></i> <span>Customer Management</span>
            </a>
        </li>


        <AuthorizeView Roles="Administrators">

            <li>
                <a href="/administration" class="link-dark rounded nav-link-flex">
                    <i class="fas fa-user-cog"></i> <span>User Management</span>
                </a>
            </li>
            <li>
                <a href="/warehouseaddress" class="link-dark rounded nav-link-flex">
                    <i class="fas fa-warehouse"></i> <span>Warehouse Management</span>
                </a>
            </li>


        </AuthorizeView>
    </ul>
</div>


@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapsed" : "expanded";

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private void ExpandNavMenu()
    {
        collapseNavMenu = false;
    }

    private void CollapseNavMenu()
    {
        collapseNavMenu = true;
    }

}

然后我将 Mainlayout.razor 更改为：

<style>
    .pb-3,
    .py-3 {
        padding-bottom: 0.93rem !important;
    }
    
</style>
<div class="page">
    <div>
        <NavMenu />
    </div>

    <main style="border-left-style: solid;border-left-width: 45px;">
        <div class="top-row px-1 auth navbar-light">
            <div class="container-fluid">
                <span class="navbar-brand mx-auto" href="#">
                    <img src="/css/images/logo.png" alt="" width="220" height="73" >
                </span>
                
            </div> 
            
            <LoginDisplay/>
         
        </div>

        <article class="content px-4">
            @Body
            <RadzenDialog />
            <RadzenNotification/>
        </article>
    </main>
</div>

最后使用这个CSS作为侧边栏：

.sBar {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    height: 100%;
    width: 45px;
    background-color: #ced0da;
    transition: width 0.3s ease;
   
}

.sBar:hover {
    width: 250px;
}

.sBar ul {
    list-style-type: none;
    padding: 0;
    margin-top: 0; /* Top margin */
    margin-right: 0; /* Right margin */
    margin-bottom: 0; /* Bottom margin */
    margin-left: 0; /* Left margin */
}

.sBar ul li {
    padding: 10px;
    text-align: center;
    white-space: nowrap;
}

.sBar ul li a {
    color: black;
    text-decoration: none;
}

.sBar ul li span {
    display: none;
}

.sBar ul li:hover {
    background-color: darkgray;
    
}

.sBar:hover a {
    display: flex !important;
    align-items: center !important;
}

.sBar:hover a span{
    display: flex !important;
    align-items: center !important;
}

.sBar:hover a i {
    margin-right: 15px !important;
    margin-left: -1px !important; /* Move the icon more to the left */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.