导航中节省空间的浮动设计

 图一：

 

如图一

在我们现在的软件中，往往会出现导航项目太多的情况，而页面的容量是固定的，就那么一个小片，当

 

导航内容超出我们已定的空间大小的时候，我们一般会在DIV上加上滚动条；

而不管横向的还是纵向的滚动条都会严重降低用户使用感受，说白了这就是一种糟糕的设计；而在我们

 

再使用纵向的滚动条的同时又在使用横向滚动条时候，基本上就无法再谈什么用户体验了；

这主要的原因是在于用户的操作习惯以及现有硬件条件的限制，其实纵向滚动条的使用时没有太大的问

 

题，因为时候鼠标滚轮的时候这个问题基本上就不会带来太大的影响，但是横向的滚动基本上无法让人

 

接受，因为鼠标的滚轮不支持横向的滚动（基本上是这样）；那么就不得不是用拖拽的方式浏览内容

 

在最近的项目中遇到了这个问题，本来页面的内容就再一个很小的区域内（iframe中），而这个在

 

iframe中的页面又被拆分成了左右两部分，左边就是我们现在讨论的导航，这个导航的实际宽度是没有

 

办法知道的（可以肯定的是，肯定会超出应该有的宽度），那么就出现了横向的滚动条，也就是图一中

 

所出现的情况。

 

为了解决这个问题，我对这个导航做了一个小小功能改变，如图二

 

图二：

 

当鼠标移动到导航上的时候，导航会从文档流中脱离出来，并进入自适应宽度环境，在这种环境中，导

 

航区域的宽度会根据内容的变化而自适应；当鼠标离开的时候，导航会恢复到文档流中

 

这样就解决了滚动条所带来的麻烦；

 

而为了能够让用户知道这是一个浮动的导航，在浮动出来的时候，我又在导航的右侧，加入了阴影效果

 

，这样，用户在使用导航的时候就会知道，当鼠标离开的时候，这个导航会恢复到原样（图一），不会

 

影响到内容的编辑，这是一种比较有用的心理引导。

 

在这个方案中要注意的问题是，在IE下，纵向滚动条的位置在浮动出来恢复后，是无法记忆纵向滚动条

 

所在的位置的，这个需要我们通过技术的手段处理（JavaScript）

 

希望能给大家带来帮助

导航中节省空间的浮动设计 后续

评论

2 楼 deepthink 2010-12-07  

jordan_micle 写道

技术方面的实现 能再开篇博文介绍一下么

http://5di.iteye.com/blog/835312

1 楼 jordan_micle 2010-12-07  

技术方面的实现 能再开篇博文介绍一下么