可以水平滚动的导航栏-阿里云开发者社区

可以水平滚动的导航栏

2016-05-10 2439

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

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

实现的效果如下:

火狐中:

chrome中:

代码如下:

   Html代码  
    
  
<!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>  