There are also many instances on the multi-level floating menu network, which is similar to the tutorial for the customer's house. However, most of them are only applicable to one situation or not flexible enough. Simply put, they are just useless. So I came up with a multi-level floating menu with more features that can be customized. The key is how to generate a new menu based on the custom menu structure. The key difficulty is how to get the lower-level menu structure and container object usage.
The ideal solution is to directly retrieve the lower-level menu structure from the object every time there is a lower-level menu, put it into the container object, and the container can be reused, instead of re-generated every time. However, after thinking for a long time, I couldn't think of a suitable practice until the multi-level linkage drop-down menu was finally inspired. Instead of directly obtaining the lower-level menu structure, the current lower-level menu structure is obtained from the original menu structure every time. Container objects are not automatically generated, but are predefined by the user (and can be automatically generated later ).
Let's take a look at the demo:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <FCK: meta http-equiv =" Content-Type "content =" text/html; charset = gb2312 "/> <title> JavaScript custom multi-level linkage floating menu _ bk bkbkjia.com </title> <style type =" text/css ">. container {width: 100px ;}. container div {width: 100px; background: # CCCCCC; line-height: 30px; border: 1px solid #000000 ;}. on {font-weight: bold ;}. container2 {width: 100px; text-align: center ;}. container2 div {width: 100px; line-height: 30px ;}. container2 a {text-decoration: none; display: block; border: 1px solid # d4d4d3; background: # e6e6e6; color: #000000 ;}/ * from: helper home www.bkjia.com */. container2. on a {background: # ffebac; color: #982e00; border-color: # ffb200 ;}# idMenu2 {clear: both; width: auto ;}# idMenu2 div {float: left ;}# idMenu2_6 a {background-color: red; border-color: red; color: # ffb200 ;} </style>
Tip: the code can be modified before running!
After these burdens are put down, the subsequent development will be smooth.
Features:
1. Generate a menu based on the custom menu structure;
2. Multi-level linkage function;
3. Custom floating position (up, down, and left );
4. Custom Latency Effect;
5. js control and editing menu;
6. container objects can be automatically generated as needed
Program Principle
The program is extended based on the traditional floating menu. Here are several key or useful points:
[Latency function]
Many people understand this. It is to set a setTimeout timer. There are two timers, namely the container timer and the menu timer. The container timer is used to hide the container when you move the cursor outside the container. The difficulty is to determine whether the current mouse is outside the container. The general method is to set a bool parameter, set it to false when mouseout, set it to true when mouseover (or reverse), and then judge based on this parameter, but this method does not work here, the container mouseout is triggered when the menu object in the container passes through. Because the event is bubbling, The mouseout of the menu object also triggers the container's mouseout.
| <Div style = "height: 100px; width: 100px; background: #000000;" onmouseout = "alert (2)"> <Div style = "height: 50px; width: 50px; background: # FF0000;" onmouseout = "alert (1)"> </Div> </Div> |
We recommend that you use the contains (ff is compareDocumentPosition) method.
This method is taught by muxrwc when I perform image slide display.
| Var isIn = false, oT = Event (e). relatedTarget; Each (oThis. Container, function (o, I) {if (o. contains? O. contains (oT) | o = oT: o. compareDocumentPosition (oT) & 16) {isIn = true ;}}); |
For details, refer to the display effect of the similar LightBox content, and the menu timer is nothing special. It is used to set the menu content.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
