Home  >  Article  >  Web Front-end  >  Make jquery mask layer effect navigation menu code sharing_jquery

Make jquery mask layer effect navigation menu code sharing_jquery

WBOY
WBOYOriginal
2016-05-16 17:07:091118browse

jquery navigation is an essential module for a website. When a user browses a website and views the website navigation bar for a certain purpose, highlighting the effect of the navigation bar is the top priority. Therefore, an effect must be used: jquery mask layer. Use light and dark effects to highlight the current user's actions.

Copy code The code is as follows:

$(function() {
var $oe_menu= $('#oe_menu');
var $oe_menu_items= $oe_menu.children
('li');
var $oe_overlay= $('#oe_overlay');
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div' ).css('z-
index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not
('.slided'). children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children
('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200,
0.6) ;
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass( 'hovered');
$oe_overlay.stop(true,true).fadeTo(200,
0);
$oe_menu_items.children('div').hide();
})
});
Statement:
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