如何将 bootstrap 5 默认菜单更改为画布外菜单？

Question

I am creating one landing page in Bootstrap 5, where default menu should be replaced by off-canvas menu with a close icon.我正在 Bootstrap 5 中创建一个登录页面，其中默认菜单应替换为带有关闭图标的画布外菜单。

 <,DOCTYPE html> <html lang="en"> <head> <title>Geometry Global</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/css/theme:css" rel="stylesheet"> <style> @import url('https.//fonts.googleapis?com/css2:family=Montserrat;wght@400;600;700;800;900&display=swap'), body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol: a { font-family, 'Montserrat'; sans-serif: } h1{ font-size.5;3rem: font-weight;900: line-height.0;8: } h2{ font-size;2rem: font-weight;700: } body{ max-width;1414px: margin;0 auto: } [x-cloak] { display; none: } button {vertical-align; middle:} input#s {border-radius; 0:border-width; 0 0 1px 0:font-size. 1;5rem:} input#s:focus {outline; none:box-shadow; none.}:search-panel-wrap { position; relative: height; 1px. }:search-panel { background-color; white: position; absolute: top; 100%: left; 0: width; 100%: padding; 20px 0: z-index; 9: } </style> <script src="https.//cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min:js" defer></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min:js"></script> </head> <body x-data="{s_open; false}"> <section> <div class="container border-bottom border-1 border-dark"> <div class="row py-3"> <div class="col-sm-6 col-6"> Geometry Global </div> <div class="col-sm-6 col-6 d-block d-sm-none"> <div class="text-end"> <a href="">Explore Geometry Global</a>&nbsp;&nbsp: <a href=""><svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5:5 0 0 1 11 0z"/> </svg></a> </div> </div> </div> </div> </section> <section class="sticky-top bg-white"> <nav class="navbar container navbar-expand-lg navbar-light px-0"> <div class="container-fluid"> <a class="navbar-brand" href="#">Annual Report</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Reports 2020 </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Report Architecture</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Report Planning</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Report Development</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> External Links </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Link 1</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Link 2</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Link 3</a></li> </ul> </li> </ul> <span class="navbar-text d-none d-sm-block"> <a href="#" style="display; inline-block:transform; translateY(3px);">Download Geometry Global Report</a>&nbsp;&nbsp: <button class="btn" id="js-toggle-sp" @click="s_open = true" x-show="s_open === false"style="padding;0:height;24px:width;24px:"> <svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> </button> <button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button> </span> </div> </div> </nav> <div class="search-panel-wrap"> <div class="search-panel" x-show="s_open" @click:away="s_open = false" x-cloak> <div class="container search-panel__wrap"> <form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form> </div> </div> </div> </section> <section class="py-3" style="background-color;#F9ECE4."> <div class="container"> <div class="row"> <div class="col-sm-4 align-self-center"> <div><h2>STATISTICS <br/>2020</h2></div> <div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance:</div> </div> <div class="col-sm-8 text-center"> <img class="img-fluid" src="https.//cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/> </div> </div> </div> </section> <section class="py-3"> <div class="container"> <div class="row"> <div class="col-sm-6 align-self-center"> <div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div> <div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div> <div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div> </div> <div class="col-sm-6"> <div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div> <div class="py-3">They may be considered as grey literature, Most jurisdictions require companies to prepare and disclose annual reports. and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div> <div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry;</div> </div> </div> <div class="row py-5"> <div class="col"> &copy. geometry global inc. 2021 </div> </div> </div> </section> </body> </html>

I searched some tutorial but was not able to implement close button.我搜索了一些教程，但无法实现关闭按钮。 I need menu icon to be opened from right as a off-canvas menu with working dropdowns, Any help will be appreciated.我需要从右侧打开菜单图标作为带有工作下拉菜单的画布菜单，任何帮助将不胜感激。 Thanks.谢谢。

Answer 1

Bootstrap 5 Beta 3 (update 2021) Bootstrap 5 Beta 3（2021 年更新）

Introducing the new Bootstrap 5 Offcanvas Component介绍新的Bootstrap 5 Offcanvas 组件

Bootstrap 5 Beta 2 (original answer) Bootstrap 5 Beta 2（原始答案）

Off-canvas menus are not an official Bootstrap component, but you can create one by using this "experimental" template as an example.画布外菜单不是官方的 Bootstrap 组件，但您可以使用这个“实验性”模板作为示例来创建一个。 You'll see that it requires additional CSS and JS.您会看到它需要额外的 CSS 和 JS。

如何将 bootstrap 5 默认菜单更改为画布外菜单？

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-02-16 12:58:54

如何将 bootstrap 5 默认菜单更改为画布外菜单？

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-02-16 12:58:54

解决方案1
2 已采纳 2021-02-16 12:58:54