Jquery dynamic navigation plug-in dynamicNav usage example analysis _ jquery

This article mainly introduces the usage of the jquery dynamic navigation plug-in dynamicNav. it gives a detailed analysis of the principles and usage of the jquery navigation plug-in, and has some reference value, for more information about how to use the jquery dynamic navigation plug-in dynamicNav, see the following example. Share it with you for your reference. The details are as follows:

This is a self-written jquery dynamic navigation plug-in-dynamicNav. the specific idea is:

1. Insert a span label to all li resources and contain the label in li.
2. copy a tag and insert it into the span. now there are two a tags in the span.
3. determine whether the switch is vertical or horizontal based on the input parameters. if the switch is vertical, change the span width to the width of a tag. then the two a tags are vertically arranged, here, you must set the overflow: hidden of li; otherwise, two a labels will be displayed. If it is horizontal, change the span width to the width of two a labels, and change the li width to the width of one a label, because I didn't set the li width in css, it changes with the width of the tag. if you set the width of all navigation menus to the same width, you can add the width attribute to the css.
The fourth step is to start making the animation effect and use the hover event to process the effect when the mouse passes and leaves.

Use animate of jquery to change the margin-top (vertical direction) and margin-left (horizontal direction) of span.

The running effect is as follows:

The online demo address is as follows:

Http://demo.jb51.net/js/2015/jquery-tab-cha-plug-dynamicNav-codes/

The code is as follows:

 Dynamic navigation plug-in