用于展示产品的滑门样式与上面的例子对应,滑门不仅能用于大容量信息的组织,也能为用户浏览大量产品条目提供方便。 SourceBits (见下图)使用了多层滑门(一个水平的,一个垂直的),用唱片封面作为导航条目。
水平滑门两端都有大的圆形箭头图标,实时反映左右导航的可用性。滑动的时候有平滑的动画,用起来非常舒服。同时,你也能看到,各个元素间距都精心设计过,这有助于内容组织,也提升了可用性。鼠标滑过时,每个条目还有漂亮的聚光灯效果。
垂直滑动的内容以及超大的水平“点击条” 接下来看看 QuickSnapper 的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图,内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门,大的按钮让“推拉”滑门更加容易。
还有,这些按钮的:active和:focus效果也很漂亮。
滑门脚本
你可以参考下面的脚本、技巧和教程制作你自己的滑门:
|