当前位置:  编程技术>WEB前端

制作jquery遮罩层效果导航菜单代码分享

    来源: 互联网  发布时间:2014-08-25

    本文导语:  jquery导航是一个网站必不可少的模块,当一个用户在一个网站上浏览的时候,为了某个目的而查看网站导航栏的时候,突出导航栏的效果是重中之重。因此必须要使用一个效果:jquery遮罩层。利用明暗效果来突出当前用户的操...

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();
})
});

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 在制作的留言簿上提交jsp的源代码的问题,
  • 从源代码到操作系统的发行版的制作
  • python代码制作configure文件示例
  • python利用elaphe制作二维条形码实现代码
  • php制作unicode解码工具(unicode编码转换器)代码分享
  • JMF制作mp3播放器如何?那位高手有这方面的参考代码?多谢!
  • openssl 编程中制作证书,宽字节码的一个问题(附代码)
  • C#制作鹰眼的详细全过程(带注释)实例代码
  • DOTNETBAR制作圆角窗体和圆角控件代码实例
  • 局域网远程开机软件制作代码分享
  • java正则表达式简单使用和网页爬虫的制作代码
  • jquery插件制作 jquery表单验证代码分享
  • 数字金额大写转换器制作代码分享(人民币大写转换)
  • java制作复制文件工具代码分享
  • jquery制作弹窗提示窗口代码分享
  • php日历制作代码分享
  • 想安装samba服务,想制作iso镜像来挂载,如何制作iso文件?
  • ubuntu8.10有个制作u盘启动盘的功能,谁能制作个u盘启动盘的iso给我?小点的,有桌面的。
  • Destoon模板怎么制作?destoon模板制作简单教程
  • usb闪存启动盘制作工具 Flashboot
  • 制作usb启动盘
  • USB启动盘制作软件 iBurnMgr
  • 图标、光标制作工具 Greenfish
  • 探讨下启动盘的制作原理!
  • 如何制作FC4启动光盘(grub)?
  • Java安装程序制作工具 IzPack
  • 图表制作软件 Openchart2
  • ThinkPHP标签怎么制作?thinkphp标签制作实例教程
  • 电子杂志制作软件 Scribus
  • 利用Wordpress轻松制作电子书 Anthologize
  • 如何利用Linux安装盘制作启动盘?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3