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


Posted in Javascript onDecember 25, 2013

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();
})
});
Javascript 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
React key值的作用和使用详解
Aug 23 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 #Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 #Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 #Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 #Javascript
JS中如何设置readOnly的值
Dec 25 #Javascript
简体中文转换繁体中文(实现代码)
Dec 25 #Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 #Javascript
You might like
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
怎样声明接口
2014/09/19 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
2014年端午节活动方案
2014/03/11 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
文明单位申报材料
2014/12/23 职场文书
2015年卫生局工作总结
2015/07/24 职场文书