This is the 12th day of my participation in the More text Challenge. For details, see more text Challenge

“Bootstrap5 zero base to master” an old liu original, strive for a daily update section.

14.1 Sliding Navigation features

Sliding navigation (Offcanvas) is a sidebar component that can be toggled with JavaScript to show and hide from the left, right, or bottom edge of the window. It is often used in projects to build hidden sidebars for navigation, shopping cart, etc.

It has the following characteristics

  • Sliding navigation Offcanvas shares some of the same JavaScript code with modal box Modals. Conceptually, they are very similar, but they are separate plug-ins.
  • When displayed, Offcanvas includes a default background, and you can click to hide the hidden canvas.
  • Similar to Modals, only one offcanvas can be displayed at a time.
  • Attention! Given the way CSS handles animations, you cannot use margin or translate on the.offcanvas element. Instead, use the class as a separate wrapper element.

It doesn’t sound very clear, but that’s ok. Let’s learn how to use it by example.

14.2 Sliding Navigation Example

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > table demo < / title > < / head > < body > < a class = "BTN BTN - the primary" Data-bs-toggle ="offcanvas" href="#offcanvasExample" role="button" aria-Controls ="offcanvasExample"> </a> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" <div class="offcanvas offcanvas-start" tabindex="-1" > id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 Class ="offcanvas-title"> Personal center </h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" <div> <div class="offcanvas-body"> <div> < span style =" box-sizing: border-box; color: RGB (74, 74, 74); font-size: 13px! Important; word-break: inherit! Important; Btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> </button> <ul Class ="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#"> </li> <li><a Class = "dropdown can - item" href = "#" > horse faces < / a > < / li > < li > < a class = "dropdown can - item" href = "#" > sun story < / a > < / li > < / ul > < / div > < / div > < / div >  <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

Click any of the above buttons, and the following interface will pop up in the window

If that sounds familiar, you can also change the text on the form to make a shopping cart. From the above example, you can see that the sliding navigation component consists of the container, the navigation head, and the navigation body, which I will cover in detail below.

14.3 Sliding Navigation Components and Parameter Meanings

14.3.1 container

< div class=”offcanvas offcanvas-start”> < div class=”offcanvas offcanvas-start”>

A positional parameter in a container that has three values

  • Offcanvas-start, as shown in the above example, pops up the navigation in the upper left corner of the screen
  • Offcanvas-end, popup navigation on the right side of the screen
  • Offcanvas-bottom, popup navigation at the bottom of the screen
  • Without this parameter, the position is uncertain, and my demo is in the lower left corner

Here is the picture with different parameters

offcanvas-end

offcanvas-bottom

No positional parameter

14.3.2 navigation head

<div class="offcanvas-header">
      <h5 class="offcanvas-title">Personal center</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
Copy the code

In the code above, the header contains a navigation title and a button. The button is the X header in the upper right corner of the navigation.

14.3.3 navigation body

All content between

is a navigation bar, and any element can be placed in it.

14.3.4 Navigation Activation buttons

This is not technically a part of the navigation, but it is generally necessary to set a button or icon on the page, and when the navigation is hidden, tap or slide to an area to activate the sliding navigation. Of course, you can also start the navigation display and then disable it.

   <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample"</a><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Display by button</button>
Copy the code

In the navigation button above

  • data-bs-toggle="offcanvas"Indicates that it works for sliding navigation
  • href="#offcanvasExample" ordata-bs-target="#offcanvasExample"OffcanvasExample in #offcanvasExample is the container ID.
  • aria-controls="offcanvasExample"Is to set the keyboard focus, can not write.

14.3.5 Display and Disable by default

This is as simple as adding a show argument to the container. This opens the page without clicking a button and navigation appears.

<div class="offcanvas offcanvas-start show" tabindex="1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
Copy the code

Adding data-bs-Keyboard =”true” to the container closes offCanvas when the escape key is pressed.

14.3.6 Mask and Disable Scrolling on the page

By default, when swiping navigation appears, the original page will appear and will disable the scrolling effect of the page, also known as locking. You can use the data-bs-Scroll property to switch the body scroll and data-bs-Backdrop to switch the background, and then add the data to the container directly.

  • Data-bs-scroll =”true”; default: false
  • Data-bs-backdrop =”false”, the default value is true

So this is a comprehensive example, you show the slide navigation and then you try to scroll the middle wheel of the mouse to see if the page can slide, but I won’t show you how it looks.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > sliding window < / title > < / head > < body > < button class = "BTN BTN - the primary"  type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" </button> <button class=" BTN btn-primary" type="button" Data-bs-toggle ="#offcanvasWithBackdrop" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop"> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" <div class="offcanvas offcanvas-start" data-bs-scroll="true"  data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <p>Try scrolling the rest of the page to see this option in action.</p> </div> </div> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">  <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div  class="offcanvas-body"> <p>..... </p> </div> </div> <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div <p>Try scrolling the rest of the page to see this option in action.</p> </div> <p> Hongmeng system can be used for mobile phones, automobiles, home appliances, smart home, smart wearable devices and other products, providing a unified language for the intelligence, interconnection and collaboration of different devices. </p> <p> Chinese technology giant Huawei has recently promoted its Hongmeng System, according to a recent report on the Website of Singapore's Lianhe Zaobao. Analysts believe that hongmeng OS will face international pressure from Google, Apple, Samsung and others, and that other Chinese rival handset makers may not immediately adopt the system. Therefore, Hongmeng OS will face many challenges. </p> <p> Hongmeng System can be used in mobile phones, cars, home appliances, smart homes, smart wearables and other products, providing a unified language for the intelligence, interconnection and collaboration of different devices, the report said. By the end of this year, Huawei expects the number of devices running The Hongmeng operating system to reach 300 million, including more than 200 million Huawei devices and more than 100 million terminals for third-party partners. </p> <p> Huawei's use of its own hongmeng system means it is no longer dependent on Android. Moreover, Hongmeng system is a system of one-time development and multi-terminal deployment, which is more suitable for the needs of the Internet of things era and has a broad application prospect. Huawei said it is working with the world's top 200 App vendors to jointly develop applications across terminal devices. </p> <p> <p style = "box-sizing: border-box! Important; word-wrap: break-word! Important;" (Reuters) </p> <p> Huawei founder Ren Zhengfei said in an internal meeting, huawei in pure software, must be dared to lead the world; The future development of the software field is basically out of the control of the United States, with greater independence and autonomy, which can "go to the root and Pierce the sky". </p> <p> However, although Huawei has announced the adoption of open source strategy for Hongmeng System, xiaomi, OPPO, Vivo and other famous Chinese mobile phone manufacturers are still on the sidelines. </p> <p style = "text-align: center; text-align: center; text-align: center; text-align: center;" <p style = "box-sizing: border-box! Important; word-break: break-word! Important; word-break: break-word! Important;" <p style = "box-sizing: border-box! Important; word-wrap: break-word! Important;" Huawei stresses that Hongmeng will enable the Internet of everything, but its technological advantages are not yet evident. Yu Chengdong, a Huawei executive, has also said hongmeng is only 70 percent as mature as Android. <p style = "box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;" In case Xiaomi and other Chinese tech companies are blocked by outside forces like Huawei, Hongmeng Systems is a good candidate. </p> <p style = "font-size: 14px; line-height: 14px; white-space: normal;" In the final analysis, the ultimate competition of digital business is the competition of operating system. The common feature of the world's top three companies, Apple, Google and Microsoft, is that they have their own operating system. <p style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit;" </p> <p> The third is to act as huawei Automotive strategic fulcrum. Hongmeng will help connect the smart car field with life, and will also bring more intelligent life experience to users in the future autonomous driving and Internet of vehicles. </p> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

14.4 Control through JavaScript

14.4.1 Using Data Attributes

In the previous example, we used data attributes to automatically assign control to an offcanvas element by adding data-bs-toggle=”offcanvas” and data-bs-target or link href to the element. If you want it to be on by default, you can add an additional show class.

14.4.2 Setting properties through JavaScript

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Copy the code

You can pass data attributes through JavaScript. For data properties, append the following option name to data-bs -, as in

  • data-bs-backdrop="true"When the offcanvas is open, apply the background to the body
  • data-bs-scroll="false"Allows the body to scroll while the offCanvas is open
  • data-bs-keyboard="true"To close offCanvas when you press the escape key

14.4.3 Display Close the sliding navigation function

Js control can be simple to achieve mouse slide over a certain area display navigation, mouse slide off the navigation effect

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Copy the code
  • Toggle switches the Offcanvas element to “show” or “hide.” Returns the caller before the offcanvas element is actually shown or hidden (that is, before the show.bs.offcanvas or hidden.bs.offcanvas event occurs).
  • Show displays the offcanvas element. Returns the caller before the offcanvas element is actually displayed (that is, before the show.bs. Offcanvas event occurs).
  • Hide hides the offcanvas element. Returns to the caller before the offcanvas element is actually hidden (that is, before the hidden.bs. Offcanvas event occurs).
  • The _getInstance static method allows you to get the offCanvas instance associated with the DOM element

14.4.4 event

Bootstrap’s OffCanvas class exposes several events to connect to the offcanvas feature.

  • This event fires immediately when show.bs. Offcanvas calls the show Instance method.
  • This event is triggered when the offcanvas element is visible to the user (it will wait for the CSS conversion to complete).
  • Hid.bs. Offcanvas calls the hide method and fires its event immediately.
  • Hidn.bs. Offcanvas This event is triggered when the offcanvas element is hidden from the user (waiting for the CSS transformation to complete).

So that’s it for today, and that’s the end of the grid. Please pay attention to me, in time to learn my old liu’s original “Bootstrap5 zero foundation to master” section 15 Bootstrap5 breadcrumb navigation component usage. If this post helped you, please click “like”.