淘宝商城商品分类特效

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

我一直认为商城的设计模式是淘宝创造出来的,特别是左侧的菜单,几乎各种商城都一样,一个大的分类,鼠标划过,你可以看到一个二级分类,但这个二级分类越做越牛,几乎包含了该商城的所有分类,当然了,这种菜单也不是很容易做的,淘宝那里还是聚集了许多牛人。

当你点击大的分类进去的时候,你可以看到一个分类的页面。以“服装,内衣,配件”为例,进去后可以看到4个分类,排列得很整齐。当我将鼠标划过的时候,我看到了一个层浮动在分类上,这个浮动层比较长,显示多了一列,该列是显示各种品牌的。

看到这个,我就会想到jquery的hover效果,但淘宝的代码是集成的,我也不好判断,只是知道可以这样去做效果。

我在制作这个特效的时候,发现在ie6下有点毛病,上面的层会被下面的挡住,当然了,其它浏览器不会,后来我采用分成上下两个div的模式进行解决,其实代码也相当简单,有兴起的朋友可以看看。

以下是我制作的效果截图:

 

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

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

下载地址:淘宝商城商品分类特效(1).zip

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