制作jquery遮罩层效果导航菜单代码分享

前端技术 2023/09/02 JavaScript

jquery导航是一个网站必不可少的模块，当一个用户在一个网站上浏览的时候，为了某个目的而查看网站导航栏的时候，突出导航栏的效果是重中之重。因此必须要使用一个效果：jquery遮罩层。利用明暗效果来突出当前用户的操作。

复制代码 代码如下:

$(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();
})
});

本文地址：https://www.stayed.cn/item/4126

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案