How to implement side sliding menu in MUI
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 of class="mui-scroll-wrapper":
<!-- 侧滑导航根容器 --> <p class="mui-off-canvas-wrap mui-draggable"> <!-- 菜单容器 --> <aside class="mui-off-canvas-left"> <p id="offCanvasSideScroll" class="mui-scroll-wrapper"> <p class="mui-scroll"> <!-- 菜单具体展示内容 --> ... </p> </p> </aside> <!-- 主页面容器 --> <p class="mui-inner-wrap"> <!-- 主页面标题 --> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> <h1 class="mui-title">标题</h1> </header> <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> <p class="mui-scroll"> <!-- 主界面具体展示内容 --> ... </p> </p> </p> </p>
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:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"></script> <link href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css" rel="external nofollow" rel="stylesheet"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> body{ background-color: #000000; } .mui-off-canvas-wrap{ max-width: 720px; margin: 0 auto; } </style> </head> <body> <!-- 侧滑导航根容器 --> <p class="mui-off-canvas-wrap mui-draggable"> <!-- 菜单容器 --> <aside class="mui-off-canvas-left"> <p id="offCanvasSideScroll" class="mui-scroll-wrapper"> <p class="mui-scroll"> <!-- 菜单具体展示内容 --> <p style="height:1000px"> </p> </p> </p> </aside> <!-- 主页面容器 --> <p class="mui-inner-wrap"> <!-- 主页面标题 --> <header class="mui-bar mui-bar-nav"> <a id="left-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> <h1 class="mui-title">标题</h1> </header> <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> <p class="mui-scroll"> <!-- 主界面具体展示内容 --> <p style="height:1000px"> </p> </p> </p> </p> </p> <script type="text/javascript" charset="utf-8"> $("#left-menu").on('tap', function (event) { mui('.mui-off-canvas-wrap').offCanvas('show'); }); window.onload = function(){ mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll(); } </script> </body> </html>
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Solutions for mobile phone screens that are difficult to slide and dry: 1. Humidify the screen; 2. Clean the screen regularly; 3. Increase the sliding strength of your fingers; 4. Use mobile phone screen protectors; 5. Replace protective covers; 6. Keep hands moist; 7. , handle it cleanly when applying the film; 8. Use lubricant; 9. Use gloves; 10. Adjust the screen brightness; 11. Replace the mobile phone. Detailed introduction: 1. Humidify the screen, place a humidifier next to the screen or spray some water to increase the humidity in the air, thereby reducing the dryness of the screen; 2. Clean the screen regularly, use professional screen cleaner, etc.

How can JavaScript achieve the up and down sliding switching effect of images and add fade-in and fade-out animations? In web development, it is often necessary to achieve image switching effects. You can use JavaScript to achieve up and down sliding switching, and add fade-in and fade-out animation effects. Let’s take a closer look. First, we need a container that contains multiple images. We can use div tags in HTML to host images. For example, we create a div with the id "image-container" to

How does JavaScript achieve the effect of dragging up and down images? With the development of the Internet, pictures play an important role in our lives and work. In order to improve the user experience, we often need to add some special effects or interactive effects to pictures. Among them, the effect of dragging up and down pictures to switch is a very common, simple and practical effect. This article will introduce how to use JavaScript to achieve this effect and provide specific code examples. First, we need to create an HTML file to display images and implement dragging

HTML, CSS, and jQuery: Technical Guidelines for Implementing Sliding Panel Effects With the popularity of mobile devices and the development of web applications, sliding panels, as a popular interaction method, are becoming more and more common in web design. By implementing the sliding panel effect, we can display more content in a limited space and improve the user experience. This article will introduce in detail how to use HTML, CSS and jQuery to achieve the sliding panel effect, and provide specific code examples. HTML Structure First, we need to create a basic

The method to implement sliding in react: 1. Find the touches in the onTouchStart event and record the new touch occurrence according to the identifier; 2. Record the coordinates of each point passed by the touch according to the identifier in the onTouchMove event; 3. In the onTouchEnd event, find The finished touch event, and then calculate the gesture to be performed based on the point crossed by the finished touch event.

Vue is a popular JavaScript framework that helps us build interactive web applications more easily. Today, we will introduce how to use Vue to create a sliding carousel. We will use VueCLI to create a new Vue project and use Vue's official carousel component to implement the sliding carousel chart. Here are the specific steps: Step 1: Install VueCLI To install VueCLI, you need to install Node.js first. Once you have Node.js installed

Interpretation of jQuery sliding events: Implementation principles and precautions In front-end development, sliding events are one of the common and commonly used interactive operations. Through sliding events, we can implement functions such as switching carousels and scrolling loading of pages. As a popular JavaScript library, jQuery provides a wealth of sliding event processing methods to facilitate us to achieve various interactive effects. This article will delve into the implementation principles and precautions of sliding events in jQuery, and provide specific code examples. 1. Implementation principle

The difference between mui and vue: 1. MUI is a UI framework, while Vue is a complete JavaScript framework; 2. MUI is mainly used to build web applications that conform to the Material Design style, while Vue is used to build various web applications; 3. MUI is mainly used to provide UI components and styles, and Vue is used to build complex web applications.
