有时候我们的水平导航栏的长度会超过屏幕宽度,那么如何增加水平滚动条呢?
使用场景:新闻页面的导航栏.
实现的效果如下:
火狐中:
chrome中:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no"> <script src="http://www.ycf518518.com/static/js/jquery-1.11.1.js" type="text/javascript"></script> <script > window.onload=function() { var width = 0; $('nav div.container a').each(function () { width += (this.offsetWidth+10);//不包括超链接的margin }); //alert(width); $('#overflow div.container').css('width', width + "px"); } </script> <style> #overflow { border: 1px solid #f00; overflow-x: scroll; overflow-y: hidden; width: 100%; } nav div a{ margin-right: 10px; display:inline-block; float:left; } </style> </head> <body> <header> <h1>新闻</h1> </header> <nav> <div id="overflow" > <div class="container"> <a href="index.asp">Home1</a> <a href="html5_meter.asp">Previous2</a> <a href="html5_noscript.asp">栏目3</a> <a href="html5_noscript.asp">栏目4</a> <a href="html5_noscript.asp">栏目5</a> <a href="html5_noscript.asp">栏目6</a> <a href="html5_noscript.asp">栏目7</a> <a href="html5_noscript.asp">栏目8</a> <a href="html5_noscript.asp">栏目9</a> <a href="html5_noscript.asp">栏目10</a> <a href="html5_noscript.asp">栏目11</a> <a href="html5_noscript.asp">栏目12</a> <a href="html5_noscript.asp">栏目13</a> <a href="html5_noscript.asp">栏目14</a> <a href="html5_noscript.asp">栏目15</a> </div> </div> </nav> </body> </html>
注意:
(1)超链接的样式一定要添加float:left
(2)overflow的宽度一定不能超过屏幕宽度,否则网页就会出现水平滚动条
这不是我们期望的效果:
参考:http://hw1287789687.iteye.com/admin/blogs/2184331
相关推荐
一款非常大气的全屏网站切换特效,点击顶部固定导航菜单链接自动切换到对应内容的jQuery全屏页面滚动导航切换效果。
水平滚动图片特效,支持横向滚动条左右拖动。因部分代码采用css3编写,故IE下效果支持不明显,需在火狐等浏览器下观看。 大家都知道,一般对于网页来说,水平滚动条是非常可怕的,网页大忌,但是如果你能将滚动条做...
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
我用的是HorizontalScrollView来实现水平条的滚动,按钮的背景宽度和图片的一致,以免被拉伸,main.xml的配置如下: android:orientation="vertical" android:layout_width="fill_parent" android:layout_...
项目中用到了滚动导航,但是默认的滚动条太丑了,只好用js自己模拟了一个。凑合用可以,不算完美。希望以后有机会再来修饰一下。 先来看下最终效果: 最终效果 先看html结构: 全单1 全部菜2单 全部3单 菜单...
导航滚动到一定高底后吸顶,锚点定位自动跟随 //内容信息导航吸顶 $(document).ready(function(){ var navHeight= $("#navHeight").offset().top; var navFix=$("#nav-wrap"); $(window).scroll(function(){...
ScrollMenu是一款非常实用的jQuery整页全屏滚动导航按钮特效插件。通过ScrollMenu可以将导航按钮设置为垂直或水平的导航条,并可以带预览图。当点击一个导航按钮时,页面以整页全屏滚动的方式平滑过渡。
对于导航,您可以使用箭头,鼠标滚轮或仅拖动项目。 组件从回调中返回项目的位置,选定的项目和click事件。 初始化时可能设置默认位置和所选项目。 :star: 如果你喜欢这个项目:) 快速开始 npm install --save ...
除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸,包括平板电脑和移动设备。 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动。 ...
React Scrollspy组件 react-scrollspy-navigation是一个React组件,它会根据滚动位置自动更新... 它也适用于垂直和水平滚动 如何使用它 向内容块添加唯一的id 。 < Section xss=removed> Content here < / S
对于根据滚动方向和速度显示/隐藏顶部导航栏非常有用。安装npm install --save scroll-data用法首先需要该模块。 const ScrollData = require ( 'scroll-data' ) ; 然后设置您自己的scrollListener。 window . ...
一个水平方向可以滑动的动态
滚动机构可以包括垂直滚动条或水平滚动条,或二者兼有,以使文档的内容上下或左右移动。 屏幕上可能存在代表键盘上的导航键的导航按钮。 用户可以单击这些按钮来滚动屏幕。 可能有非常不同的滚动方法,例如使用pdf...
jquery 熔岩灯导航菜单 动画效果 导航条,jquery制作水平滚动熔岩灯导航条,和垂直滚动熔岩灯导航菜单,鼠标滑过导航标签动画效果展示当前的导航条背景图片,随着导航标签容器的宽度和高度自适应平铺背景图片。
最近有点空闲就自己写点东西,或者写出来的东西没什么水平,封装也不怎么好,但也算是一种分享,也想大神们指点一下。勿喷,有bug一起交流。里面用到了HMSegmentedControl,谢谢。
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
支持移动端html5 可以控制滚动条样式,方便实用。 /* 1、showArrows:是否显示滚动箭头,模式是false; 2、maintainPosition:当滚动区重新初始化后,是否保持滚动条的原有位置,默认是true; 3、stickToBottom:...
7.jquery+div实用漂亮精致的多级导航栏菜单插件代码示例 8.jQuery+ul实现漂亮竖直下拉菜单 9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的...
这是一款使用了html5和jQuery制作的全屏响应式文章水平横向布局网页模板。插件中使用了jscrollpane来美化滚动条。该插件通过导航可以在水平方向上切换不同的文章。
通过触摸幻灯片视图的能力,并且很容易调整动作栏在XML的大小支持所有的Android SDK版本,从2.0和,同时所有水平滚动视图不会工作的这一观点,除了您将使用刷卡的边框模式(多读有用的提示信息)等。