The menu written in jquery slides from left to right and appears

Home

Web Front-end

JS Tutorial

The menu written in jquery slides from left to right and appears_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:52 PM

slide menu

Recently, I happened to be researching the production of microsites, and I read a lot of information about WeChat 3 platform development tutorials. There are almost no such introductions, but they are all third-party platforms that provide templates for making microsites. Later, I am very grateful to Liu Feng Blog The last article I wrote to explain the microsite,

“What is a microsite?

Microsites are old wine in new bottles. They have been deified by some marketing people, so much so that many developers I’m asking what a microsite is and how to develop a microsite. A microsite is essentially a mobile website (Web APP) that uses the WeChat browser as the entrance and is compatible with the technologies and technologies used to develop microsites such as Android, iOS, and WP. Developing ordinary websites is based on HTML (HTML5), CSS, Javascript, etc., so developers with experience in ordinary website development are fully capable of developing microsites

PS: What will beginners see in the future. New terms starting with "微", such as: micro mall, micro customer service, micro statistics, it is not difficult to understand if you just remove the word "微" or think of "微" as "based on WeChat",

Most of them involve the writing method of html5, so it is easy to understand. . . There is also a reference to the case in "WeChat Business Bao". I wrote a demo of the navigation in it. It feels very easy to understand. The interface renderings below

The menu written in jquery slides from left to right and appears_jquery
because it is used Written by jq, you need to quote the library file. The online cdn address is used here:

Copy the code The code is as follows :

Then write the html navigation structure

Copy the codeThe code is as follows:

< /div>

There is nothing technical about this part, it is purely a div structure

Copy code The code is as follows :

 
 *{ margin:0; padding:0;} 
body{ 
font- size:1em; 
height:100%; 
margin:0; 
padding:0; 
} 

Copy code The code is as follows:

 
/*This is the style of the shortcut button, using css3 attribute writing method, not considering ie8-*/ 
.quick{ 
position:relative; 
left:0; 
top:0; 
width:100%; 
height:32px; 
background:-webkit-gradient(linear, left top, left bottom, from(#99f), to(#96f)) ; 
background:-webkit-linear-gradient(#99f, #96f); 
background: -moz-linear-gradient(#99f, #96f); 
background: -ms-linear-gradient (#99f, #9f); 
background: -o-linear-gradient(#99f, #96f); 
background: linear-gradient(#99f, #96f); 
}/*this The side is the css of the navigation, */ 
 .slideLeftMenu{ 
display:none; 
width:272px; 
min-height:100%; 
background:#3d3d3d; 
position:absolute; 
right:0; 
top:0; 
z-index:3; 
} 
.slideLeftMenu .quick-toolbar, 
.slideLeftMenu .list-item{ 
display:block; 
width:100%; 
float:left; 
height:42px; 
line-height:42px; 
background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 
background:-webkit-linear-gradient (#444, #222); 
background: -moz-linear-gradient(#444, #222); 
background: -ms-linear-gradient(#444, #222); 
background : -o-linear-gradient(#444, #222); 
background: linear-gradient(#444, #222); 
} 
.quick-toolbar .toolbar-title{ 
 float:right; 
color:#fff; 
margin-right:10px; 
} 
.quick-toolbar .toolbar-icon-delete{ 
float:left; 
width :18px; 
height:18px; 
margin:11px 0 0 10px; 
background:url(images/icons-18-white.png) -73px -1px #212121; 
border-radius :9px; 
} 
.menuList .list-item-title{ 
float:left; 
font:blod 1.125em Arial, Helvetica, sans-serif; 
color:#fff; 
text-indent:0.75em; 
text-align:left; 
border:solid 0px red; 
} 
.menuList .list-item-icon{ 
float:right ; 
width:18px; 
height:18px; 
margin:11px 10px 0 0; 
background:url(images/icons-18-white.png) -108px -1px #212121; 
border-radius:9px; 
}/*The css part of the mask, most of these are implemented using absolute positioning, because we want the navigation to fly in smoothly from the right side*/ 
. masklayer{ 
display:none; 
width:100%; 
height:100%; 
position:absolute; 
left:0; 
top:0; 
background ; Use jq to process the animation part, the following code 

Copy the code

The code is as follows: window.QuickPanel = { //Define global function 'isOpened': false, 'opened': function(){ //Define the method to open the panel. If the background layer and shortcut button layer are clicked while opening, the panel will be closed. $masklayer.fadeIn().on("click" ,function(){

window.QuickPanel.closed();

}); 
$quickpanel_toolbar.on("click" ,function (){ 
window.QuickPanel.closed(); 
}); 
$panel.css({ //Fly in from the right and use absolute positioning to operate
"width":"272px ", 
"top":"-6px", 
"right":"-272px" 
}).show().animate({"right":"0"},function() { 
window.QuickPanel.isOpened = true; 
}); 
}, 
'closed': function(){ //Define the method to close the panel 
$panel.css({" right":"0"}).show().animate({ 
"right":"-272px" 
},function(){ 
$masklayer.fadeOut(); //This way The mask that has just faded out has problems when I click too fast. . . 
window.QuickPanel.isOpened = false; 
$panel.hide(); //Hide the menu after the animation is over, so there will be no scroll bar
}); 
} 
} ; 

 
This part is the most important. I encapsulated a quickpanel function, which has two methods: open and closed. It will be more convenient for us to click and call other dom elements. The final implementation is as shown in the picture 

ps: There is a problem here. A scroll bar will appear during the sliding process. This is actually very unsightly. Do you have any ideas to solve it? ? I put the attachment over there in the resources. Please download it and run it to have a look. If there is anything wrong, please leave a message~~Thank you very much.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks ago By DDD

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

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

Java Tutorial

1655

CakePHP Tutorial

1413

Laravel Tutorial

1306

PHP Tutorial

1252

C# Tutorial

1226

Related knowledge

Windows 11: The easy way to import and export start layouts Aug 22, 2023 am 10:13 AM

In Windows 11, the Start menu has been redesigned and features a simplified set of apps arranged in a grid of pages, unlike its predecessor, which had folders, apps, and apps on the Start menu. Group. You can customize the Start menu layout and import and export it to other Windows devices to personalize it to your liking. In this guide, we’ll discuss step-by-step instructions for importing Start Layout to customize the default layout on Windows 11. What is Import-StartLayout in Windows 11? Import Start Layout is a cmdlet used in Windows 10 and earlier versions to import customizations for the Start menu into

How to Default 'Show More Options' in Windows 11's Right-Click Menu Jul 10, 2023 pm 12:33 PM

One of the most annoying changes that we users never want is the inclusion of "Show more options" in the right-click context menu. However, you can remove it and get back the classic context menu in Windows 11. No more multiple clicks and looking for these ZIP shortcuts in context menus. Follow this guide to return to a full-blown right-click context menu on Windows 11. Fix 1 – Manually adjust the CLSID This is the only manual method on our list. You will adjust specific keys or values in Registry Editor to resolve this issue. NOTE – Registry edits like this are very safe and will work without any issues. Therefore, you should create a registry backup before trying this on your system. Step 1 – Try it

What should I do if my mobile phone screen is hard to slide and dry? Dec 04, 2023 pm 03:51 PM

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 to remove the 'Open in Windows Terminal' option from the right-click context menu in Windows 11 Apr 13, 2023 pm 06:28 PM

By default, the Windows 11 right-click context menu has an option called Open in Windows Terminal. This is a very useful feature that allows users to open Windows Terminal at a specific location. For example, if you right-click on a folder and select the "Open in Windows Terminal" option, Windows Terminal will launch and set that specific location as its current working directory. Although this is an awesome feature, not everyone finds a use for this feature. Some users may simply not want this option in their right-click context menu and want to remove it to tidy up their right-click context menu.

Implementation steps of implementing menu navigation bar with shadow effect using pure CSS Oct 16, 2023 am 08:27 AM

The steps to implement a menu navigation bar with shadow effect using pure CSS require specific code examples. In web design, the menu navigation bar is a very common element. By adding a shadow effect to the menu navigation bar, you can not only increase its aesthetics, but also improve the user experience. In this article, we will use pure CSS to implement a menu navigation bar with a shadow effect, and provide specific code examples for reference. The implementation steps are as follows: Create HTML structure First, we need to create a basic HTML structure to accommodate the menu navigation bar. by

How to disable the Show more options menu in Windows 11 Apr 13, 2023 pm 08:10 PM

More and more people are experiencing the new and improved Microsoft operating system, but it seems that some of them still prefer the old-school design. There's no doubt that the new context menu brings impressive consistency to Windows 11. If we consider Windows 10, the fact that each application has its own context menu element creates serious confusion for some people. From the Windows 11 transparent taskbar to the rounded corners, this operating system is a masterpiece. In this matter, users across the globe are interested to know how to quickly disable Windows 11 Show More Options menu. The process is pretty simple, so if you're in the same boat, make sure you check it out completely

How to edit messages on iPhone Dec 18, 2023 pm 02:13 PM

The native Messages app on iPhone lets you easily edit sent texts. This way, you can correct your mistakes, punctuation, and even autocorrect wrong phrases/words that may have been applied to your text. In this article, we will learn how to edit messages on iPhone. How to Edit Messages on iPhone Required: iPhone running iOS16 or later. You can only edit iMessage text on the Messages app, and then only within 15 minutes of sending the original text. Non-iMessage text is not supported, so they cannot be retrieved or edited. Launch the Messages app on your iPhone. In Messages, select the conversation from which you want to edit the message

How to use JavaScript to achieve the up and down sliding switching effect of images and add fade-in and fade-out animations? Oct 20, 2023 am 11:19 AM

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

See all articles