图一:
如图一
在我们现在的软件中,往往会出现导航项目太多的情况,而页面的容量是固定的,就那么一个小片,当
导航内容超出我们已定的空间大小的时候,我们一般会在DIV上加上滚动条;
而不管横向的还是纵向的滚动条都会严重降低用户使用感受,说白了这就是一种糟糕的设计;而在我们
再使用纵向的滚动条的同时又在使用横向滚动条时候,基本上就无法再谈什么用户体验了;
这主要的原因是在于用户的操作习惯以及现有硬件条件的限制,其实纵向滚动条的使用时没有太大的问
题,因为时候鼠标滚轮的时候这个问题基本上就不会带来太大的影响,但是横向的滚动基本上无法让人
接受,因为鼠标的滚轮不支持横向的滚动(基本上是这样);那么就不得不是用拖拽的方式浏览内容
在最近的项目中遇到了这个问题,本来页面的内容就再一个很小的区域内(iframe中),而这个在
iframe中的页面又被拆分成了左右两部分,左边就是我们现在讨论的导航,这个导航的实际宽度是没有
办法知道的(可以肯定的是,肯定会超出应该有的宽度),那么就出现了横向的滚动条,也就是图一中
所出现的情况。
为了解决这个问题,我对这个导航做了一个小小功能改变,如图二
图二:
当鼠标移动到导航上的时候,导航会从文档流中脱离出来,并进入自适应宽度环境,在这种环境中,导
航区域的宽度会根据内容的变化而自适应;当鼠标离开的时候,导航会恢复到文档流中
这样就解决了滚动条所带来的麻烦;
而为了能够让用户知道这是一个浮动的导航,在浮动出来的时候,我又在导航的右侧,加入了阴影效果
,这样,用户在使用导航的时候就会知道,当鼠标离开的时候,这个导航会恢复到原样(图一),不会
影响到内容的编辑,这是一种比较有用的心理引导。
在这个方案中要注意的问题是,在IE下,纵向滚动条的位置在浮动出来恢复后,是无法记忆纵向滚动条
所在的位置的,这个需要我们通过技术的手段处理(JavaScript)
希望能给大家带来帮助
- 大小: 94.9 KB
- 大小: 164.5 KB
分享到:
相关推荐
导航随滚动条浮动
顶部浮动固定导航条
javascript实现的网页菜单栏浮动导航
QQ登录导航
浮动的导航菜单
jquery浮动固定层导航描点上下滚动的浮动定位层
导航浮动和Css3分页,以及菜单导航的css编写!!
最新的js特效 导航 滚动条 浮动 浏览器顶部 很实用
如何css语言实现浮动的功能,在文件的style里有实现浮动的代码。
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
我们将向您展示如何创建一个水平
左侧栏浮动常驻导航栏js特效代码,很常见的一种特效,企业网站或者商城网站都经常使用,php中文网推荐下载!
17素材的资源,下载还要积分,专门扒下来的,jquery 后台左侧点击折叠关闭功能,不是折叠菜单哦
分享一款jQuery基于Bootstrap顶部浮动导航菜单代码,网页向下滚动时自动隐藏,往上滚动或滚动到底部又会自动显示出来。
jQuery css3导航菜单,3d菜单动画,浮动导航菜单。
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码。
网页底部浮动导航条
超过一定高度出现左右浮动导航及底部固定导航代码
网页下拉顶部浮动菜单导航,代码简单易用。
非常酷的浮动定位层导航描点上下滚动的浮动导航