制作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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
微信JSSDK上传图片
Aug 23 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
Javascript闭包实例详解
Nov 29 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
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
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php时间计算相关问题小结
2016/05/09 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
基于Vue实例对象的数据选项
2017/08/09 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python实现视频读取和转化图片
2019/12/10 Python
python3中for循环踩过的坑记录
2020/12/14 Python
python用700行代码实现http客户端
2021/01/14 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
UNIX命令速查表
2012/03/10 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
工商干部先进事迹
2014/05/14 职场文书
雷人标语集锦
2014/06/19 职场文书
微信搭讪开场白
2015/05/28 职场文书
首席执行官观后感
2015/06/03 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
python对文档中元素删除,替换操作
2022/04/02 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript