可以水平滚动的导航栏

有时候我们的水平导航栏的长度会超过屏幕宽度,那么如何增加水平滚动条呢?

使用场景:新闻页面的导航栏.

实现的效果如下:

火狐中:

 chrome中:

 代码如下:

Html代码  

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">  
  6. <script src="http://www.ycf518518.com/static/js/jquery-1.11.1.js" type="text/javascript"></script>  
  7. <script >  
  8. window.onload=function()  
  9. {  
  10. var width = 0;  
  11.     $('nav div.container a').each(function () {  
  12.     width += (this.offsetWidth+10);//不包括超链接的margin  
  13.       
  14.   });  
  15.   //alert(width);  
  16.   $('#overflow div.container').css('width', width + "px");  
  17. }  
  18. </script>  
  19. <style>  
  20. #overflow {  
  21.         border: 1px solid #f00;  
  22.         overflow-x: scroll;  
  23.         overflow-y: hidden;  
  24.         width: 100%;   
  25.     }  
  26.     nav div a{  
  27.         margin-right: 10px;  
  28.         display:inline-block;  
  29.         float:left;  
  30.     }  
  31. </style>  
  32. </head>      
  33. <body>  
  34. <header>  
  35. <h1>新闻</h1>  
  36. </header>  
  37. <nav>  
  38. <div id="overflow" >  
  39. <div class="container">  
  40. <a href="index.asp">Home1</a>  
  41. <a href="html5_meter.asp">Previous2</a>  
  42. <a href="html5_noscript.asp">栏目3</a>  
  43. <a href="html5_noscript.asp">栏目4</a>  
  44. <a href="html5_noscript.asp">栏目5</a>  
  45. <a href="html5_noscript.asp">栏目6</a>  
  46. <a href="html5_noscript.asp">栏目7</a>  
  47. <a href="html5_noscript.asp">栏目8</a>  
  48. <a href="html5_noscript.asp">栏目9</a>  
  49. <a href="html5_noscript.asp">栏目10</a>  
  50. <a href="html5_noscript.asp">栏目11</a>  
  51. <a href="html5_noscript.asp">栏目12</a>  
  52. <a href="html5_noscript.asp">栏目13</a>  
  53. <a href="html5_noscript.asp">栏目14</a>  
  54. <a href="html5_noscript.asp">栏目15</a>  
  55.   
  56. </div>  
  57. </div>  
  58. </nav>  
  59. </body>  
  60. </html>  

 注意:

(1)超链接的样式一定要添加float:left

(2)overflow的宽度一定不能超过屏幕宽度,否则网页就会出现水平滚动条

这不是我们期望的效果:

 

 

参考:http://hw1287789687.iteye.com/admin/blogs/2184331

时间： 2024-09-11 08:18:42

可以水平滚动的导航栏的相关文章

Bootstrap&lt;基础十七&gt;导航栏

原文:Bootstrap<基础十七>导航栏 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 ro

jquery实现垂直和水平菜单导航栏_jquery

本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖直导航菜单</title> <link href="css/Vmenu.css" rel="stylesheet" /> <scr

《Visual Studio程序员箴言》----1.2 滚动与导航

1.2 滚动与导航 Visual Studio程序员箴言 能够查看代码并将光标移到所关注的任意行,与能够尽可能轻松地输入代码同样重要. 1.2.1 滚动 我们都习惯使用鼠标滚轮来滚动编辑器内的代码和文本.以下技巧介绍了一些新的键盘快捷键,可改善你对滚动查看的体验.此外还介绍了如何隐藏所有的滚动条.说不定什么时候这些技巧就会派上用场. 技巧1.13 使用鼠标滚轮在各个方向上滚动 您知道可以按鼠标滚轮并把它当作第三个按键来用吗?对于很多带有编辑器的应用程序来说,按下鼠标滚轮会显示一个图标,指示可以往

Fullpage.js固定导航栏-实现定位导航栏_javascript技巧

FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工

JQuery Mobile实现导航栏和页脚_jquery

导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g

frameset框架，分为左右两边，左边是导航栏，点击左边，右边显示对应的图片img

问题描述 frameset框架,分为左右两边,左边是导航栏,点击左边,右边显示对应的图片img frameset框架,分为左右两边,左边是导航栏,点击左边,右边显示对应的图片img(仅仅是图片),问题是:如何让图片在右边居中? 谢谢 C币少,见谅 解决方案 简化为div居中! 如果是水平居中那么可以margin: 0 auto, 如果是垂直也居中那么:position:relative; left :50%; top:50%; margin-left: 图片宽度乘以-1/2:margin-top

如何设计好B2B行业网站导航栏提高易用性

导航栏是指位于页面页眉区域的一排水平导航文字或图片按钮,或者是位于页面左边或右边的一排导航文字或图片按钮.它起着链接B2B行业网站各个栏目的作用,或者链接一级栏目下面许多二级栏目的作用,让访问者能方便.快速的找到自己所需要的内容和功能. B2B行业网站的导航栏与其他网站的导航栏基本一样,不过还是有一些区别.判断一个B2B行业网站的导航栏是否符合要求,可以多参考一些大网站,比如新浪.腾讯.知名的B2B行业网站等,他们在设计的时候大部分还是遵守了网站建设的标准,下面讲解一些基本标准,以供我们在判断设

初学Foundation：用JS工具实现的导航栏

文章简介:初学Foundation,我们先来看几种用javascript工具实现效果的导航栏.我还会介绍另一种有益于你更好地成为Foundation开发者.很有用的工具. 一个前端框架是否优秀,其中看该框架如何处理导航栏.初学Foundation,我们先来看几种用javascript工具实现效果的导航栏.我还会介绍另一种有益于你更好地成为Foundation开发者.很有用的工具. Section 插件 Foundation提供其中一个最好的javascript插件就是Section:类似于tab

CSS实例教程:简单的的滑动导航栏效果

文章简介:CSS实例教程:简单的的滑动导航栏效果. 由于网页字体的限制,以及对导航栏美观的需求,使用background-repeat来做一个简单的文字导航栏已经远远不够了.在很多场合,导航栏的背景是一个图案,字体也不再是单调的宋体,这就需要我们把导航栏的整体效果做图在网页中使用. 今天我们就来做一个简单的的滑动导航栏效果(不知道应该叫它什么^_^),效果如下图:   思路:通过改变链接鼠标悬停状态(hover)的背景图片,来达到把鼠标放上去有高亮显示的效果. 方法:在本例中,我们是通过调整各链