制作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与CSS复习(二)
Jun 29 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 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代码包装修正版
2008/03/15 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python实现文件复制删除
2016/04/19 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
详解Python中的四种队列
2018/05/21 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
QML用PathView实现轮播图
2020/06/03 Python
django下创建多个app并设置urls方法
2020/08/02 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
会计电算化个人自我评价
2013/11/17 职场文书
工程招投标邀请书
2014/01/26 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
看雷锋电影观后感
2015/06/10 职场文书