制作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 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
使用Javascript简单计算器
Nov 17 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
基于php-fpm的配置详解
2013/06/03 PHP
php广告加载类用法实例
2014/09/23 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python实现多线程端口扫描
2019/08/31 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
餐饮加盟计划书
2014/01/10 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS