支付宝二级下拉菜单特效

作者:林炜贤来源:www.163css.com发表时间:(2011-09-12)

支付宝可以说是网上交易的一个创举,喜欢它的朋友估计对它的首页非常熟悉。这是一个功能性的网站,橙色的导航,登录注册放在右上角,非常符合人的浏览习惯,鼠标放到右上就可以注册或是登录了。在这个页面上我们可以看到许多交易,还款之类的,还有许多银行卡,呵,挺专业的。

我今天要向大家介绍的是支付宝的二级下拉菜单,看起来非常普通,我之前也做过一个jquery实现二级下拉菜单的特效,但相对于支付宝这个二级菜单,我们会发现它多了一个小功能,当我将鼠标移到二级导航时,一级导航的背景仍然存在,普通用户可能不会注意,但作为一名专业的前端开发工程师,我是知道的,这个可以起到提示的作用。

当然了,阿里集团的代码是不能直接用的,我们只能自己写了。我将功能实现了,然而在ie6下那个阴影却出不来,ie6不支持box-shadow这个功能,如果你采用高级点的浏览器,比如ie9,firefox之类的,就可以看到很漂亮的阴影了。

这是在高级浏览器下的效果。。。

在ie6下我们只能看到边框,曾经看到过可以引用htc文件使得ie6支持阴影,但我还是放弃了,不想加太多代码,这样看起来也舒服的。。

当然了,跟支付宝比起来,还是有许多细节要修理了,但我的时间有限,功能做出来,大家根据需要修改吧。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/201109/zfbcd/index.html

下载地址:支付宝二级下拉菜单.zip

返回作者主页:www.163css.com阅读 (7239)
更多 1