可以水平滚动的导航栏
有时候我们的水平导航栏的长度会超过屏幕宽度,那么如何增加水平滚动条呢?
使用场景:新闻页面的导航栏.
实现的效果如下:
火狐中:
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的宽度一定不能超过屏幕宽度,否则网页就会出现水平滚动条
这不是我们期望的效果: