制作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 相关文章推荐
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
js实现图片无缝滚动
Dec 23 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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下使用curl模拟用户登陆的代码
2010/09/10 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
基于php判断客户端类型
2016/10/14 PHP
文本加密解密
2006/06/23 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
围观tangram js库
2010/12/28 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
js获取域名的方法
2015/01/27 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
母亲节感恩寄语
2014/02/21 职场文书
保险内勤岗位职责
2014/04/05 职场文书
村庄环境整治方案
2014/05/15 职场文书
作风建设演讲稿
2014/05/23 职场文书
集中采购方案
2014/06/10 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
学年个人总结范文
2015/03/05 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python