制作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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
Vue动态获取width的方法
Aug 22 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php生成QRcode实例
2014/09/22 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
js实现随机点名程序
2020/09/17 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python中DJANGO简单测试实例
2015/05/11 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python实现打砖块游戏
2020/02/25 Python
学python最电脑配置有要求么
2020/07/05 Python
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
老人节标语大全
2014/10/08 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
数学复习课教学反思
2016/02/18 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
css3 选择器
2022/05/11 HTML / CSS