自适应网站导航栏Css实现横向滑动显示所有栏目名称

网站导航在前端制作中是很重要的一部分，在自适应网站中，对于导航栏的自适应也有很多种，大部分网站的处理方法是在页面小于768像素之后就对导航栏进行了隐藏，然后用导航菜单Icon图标来替代，当点击Icon图标后，导航栏所有栏目名称又显示出来，并在页面小于768像素的时候又重新对导航栏的样式进行了定义。而自适应网站导航栏最简单的办法就是用Css实现横向滑动显示所有栏目名称，只用简单的3行Css代码就实现了这个效果。

Html代码：

    <nav class="menu">
        <ul class="container">
            <li><a href="index.html">首页</a></li>
            <li><a href="list.html">好看壁纸</a></li>
            <li><a href="list.html">唯美图片</a></li>
            <li><a href="list.html">头像图片</a></li>
            <li><a href="list.html">壁纸图片</a></li>
            <li><a href="list.html">游戏动漫</a></li>
            <li><a href="list.html">风景图片</a></li>
        </ul>
    </nav>

Css代码：

.header .menu ul {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
}

代码没有全部放完，只是记录以下具体用法，white-space: nowrap就是不换行，overflow-y属性设置会隐藏，overflow-x设置为auto，就是在X轴上自动。就这样短短的3行Css样式代码就可以实现自适应网站导航栏Css实现横向滑动显示所有栏目名称。