Below I will share with you an article on how to implement MUI side-sliding menu and its main part to slide up and down. It has a good reference value and I hope it will be helpful to everyone.

The introduction of the side-sliding menu in the MUI document does not explain how to implement side-sliding. The MUI side-sliding menu does not have the up and down sliding function by default and needs to be activated.

1. First add the ID to the element ofclass="mui-scroll-wrapper":

 
  
  
  
  
标题
 
 
 
  ... 
 
 
 

As can be seen from the above example , IDs are added to both the side sliding menu and the main part.

are: offCanvasSideScroll, offCanvasContentScroll

2. Secondly, activate in JS:

mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll();

You’re done. Now you can slide down after exceeding the height.Note that it exceeds the height!Just like a browser, if the "specific display content of the main interface" does not exceed the range, there is no sliding function.

MUI: MUI sliding menu.

Complete code:

          
   
  
  
  
  
标题
 
 
 
  
 
 
 
 
 
   

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the exchange method of two variable values in JS

How to implement custom instructions in Vue ?

How to modify the style of child components through parent components in vue

The above is the detailed content of How to implement side sliding menu in MUI. For more information, please follow other related articles on the PHP Chinese website!