现在有个这样的问题。。就是在页面有个水平导航条。但是导航条中的栏目是从数据库中取出来的。就有可能存在导航条内容过长,页面显示效果较差,我想实现的效果是固定显示区域,然后在最后面给个左右的按钮例如“< “和” >”,如果导航条过长就可以左右按钮显示另外部分的导航栏目。。。效果图见附件。。。。请问大家怎么实现,关键那个栏目的个数不定,而且每个栏目的内容长度也不定,或者有其它的解决方案也可以提出来。。。
而且我的页面是做成自适应的,也就是说div的宽度随分辨率的大小来进行调整。 ??
自适应的话 按分辨率的大小进行调整,那么字体也跟着进行调整,没有多大的影响。
实现到是可以实现 使用jquery 的animate
点击左边的箭头$("#div").animate({
left: "+="+移动的宽度
}, 100 );
同理 右边
点击左边的箭头$("#div").animate({
left: "-="+移动的宽度
}, 100 );
当然假如菜单是首页的话 左边的箭头最好隐藏
菜单上面是最后一项的话 右边的箭头也隐藏
其他情况,左右箭头同在
另外附带API http://api.jquery.com/animate/ 里面有个类似的Demo 可以借鉴一下 :wink:
隐藏可以用$("#id").hide() 或者display none 属性
左边的箭头隐藏就判断数据库返回的list的第一条是不是等于第一个div里面的html()
右边的箭头也是同理的list最后一个……
导航上面到底放多少个 还是看你自己div布局的处理罗 最简单的办法就是你固定n个栏目 ,大概估计能排满,不会超出,短的内容排下来也没那么空白,
要复杂点看起来不管内容长短都能刚好排满的话,那就多发点功夫,就是计算出list里面内容的长度,然后再布局。