图一:
如图一
在我们现在的软件中,往往会出现导航项目太多的情况,而页面的容量是固定的,就那么一个小片,当
导航内容超出我们已定的空间大小的时候,我们一般会在DIV上加上滚动条;
而不管横向的还是纵向的滚动条都会严重降低用户使用感受,说白了这就是一种糟糕的设计;而在我们
再使用纵向的滚动条的同时又在使用横向滚动条时候,基本上就无法再谈什么用户体验了;
这主要的原因是在于用户的操作习惯以及现有硬件条件的限制,其实纵向滚动条的使用时没有太大的问
题,因为时候鼠标滚轮的时候这个问题基本上就不会带来太大的影响,但是横向的滚动基本上无法让人
接受,因为鼠标的滚轮不支持横向的滚动(基本上是这样);那么就不得不是用拖拽的方式浏览内容
在最近的项目中遇到了这个问题,本来页面的内容就再一个很小的区域内(iframe中),而这个在
iframe中的页面又被拆分成了左右两部分,左边就是我们现在讨论的导航,这个导航的实际宽度是没有
办法知道的(可以肯定的是,肯定会超出应该有的宽度),那么就出现了横向的滚动条,也就是图一中
所出现的情况。
为了解决这个问题,我对这个导航做了一个小小功能改变,如图二
图二:
当鼠标移动到导航上的时候,导航会从文档流中脱离出来,并进入自适应宽度环境,在这种环境中,导
航区域的宽度会根据内容的变化而自适应;当鼠标离开的时候,导航会恢复到文档流中
这样就解决了滚动条所带来的麻烦;
而为了能够让用户知道这是一个浮动的导航,在浮动出来的时候,我又在导航的右侧,加入了阴影效果
,这样,用户在使用导航的时候就会知道,当鼠标离开的时候,这个导航会恢复到原样(图一),不会
影响到内容的编辑,这是一种比较有用的心理引导。
在这个方案中要注意的问题是,在IE下,纵向滚动条的位置在浮动出来恢复后,是无法记忆纵向滚动条
所在的位置的,这个需要我们通过技术的手段处理(JavaScript)
希望能给大家带来帮助