制作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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
JS之小练习代码
Oct 12 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
JavaScript实现京东快递单号查询
Nov 30 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计数器的实现代码
2013/06/08 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
2019/02/21 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
基于python的七种经典排序算法(推荐)
2016/12/08 Python
python3实现名片管理系统
2020/11/29 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python爬虫基础知识点整理
2020/06/02 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
党员自我评价分享
2013/12/13 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
请假条标准格式规范
2014/04/10 职场文书
村委会换届选举方案
2014/05/03 职场文书
经营理念标语
2014/06/21 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers