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