Three jquery navigation menu (using jquery navigation plugin)

Source: Internet
Author: User

File Js/menu.js added
All only provide jquery navigation menu code, CSS and so on will not be written.

*/
Mouse across the display menu, leaving the hidden menu
jquery (document). Ready (function () {
Find all menus and add show and hide menu events
jquery (' #menus > Li '). each (function () {
jquery (this). Hover (

Show Menu
function () {
jquery (This). Find (' ul:eq (0) '). Show ();
},

Hide Menu
function () {
jquery (This). Find (' ul:eq (0) '). Hide ();
}

);
});
});

Scrolling navigation Menu

Hover over the scroll menu, and leave the scrolling roll up menu. Need to add delay processing, reason with fade fade in navigation menu processing
var mouseo tutorial Ver_tid = [];
var mouseout_tid = [];

jquery (document). Ready (function () {
jquery (' #menus > Li '). each (function (index) {
jquery (this). Hover (

Cancel the thread that rolled up the menu, delay expand the menu
function () {
var _self = this;
Cleartimeout (Mouseout_tid[index]);
Mouseover_tid[index] = settimeout (function () {
jquery (_self). Find (' ul:eq (0) '). Slidedown (200);
}, 400);
},

Cancel the thread that expands the menu, delay roll up the menu
function () {
var _self = this;
Cleartimeout (Mouseover_tid[index]);
Mouseout_tid[index] = settimeout (function () {
jquery (_self). Find (' ul:eq (0) '). Slideup (200);
}, 400);
}

);
});
});


Fade Fade in navigation menu
var mouseover_tid = [];
var mouseout_tid = [];

jquery (document). Ready (function () {
jquery (' #menus > Li '). each (function (index) {
jquery (this). Hover (

Cancel fade Out menu thread, delay Fade in menu
function () {
var _self = this;
Cleartimeout (Mouseout_tid[index]);
Mouseover_tid[index] = settimeout (function () {
jquery (_self). Find (' ul:eq (0) '). Fadein (200);
}, 400);
},

Cancel the Fading menu thread, delay Fade menu
function () {
var _self = this;
Cleartimeout (Mouseover_tid[index]);
Mouseout_tid[index] = settimeout (function () {
jquery (_self). Find (' ul:eq (0) '). fadeout (200);
}, 400);
}

);
});
});

//


</script>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.