制作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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
JS高级笔记
Jul 13 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
js倒计时抢购实例
2015/12/20 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python 异或加密字符串的实例
2018/10/14 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
python多线程同步之文件读写控制
2021/02/25 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
陈欧广告词
2014/03/14 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
小孩不笨观后感
2015/06/03 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers