Examples of jquery dynamic navigation plug-in dynamicNav usage,

Examples of jquery dynamic navigation plug-in dynamicNav usage,

This document describes how to use the jquery dynamic navigation plug-in dynamicNav. 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:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
I hope this article will help you with jquery programming.