css实现移动端H5左右滑动的导航

最新推荐文章于 2024-07-13 22:56:07 发布

dkmilk

最新推荐文章于 2024-07-13 22:56:07 发布

阅读量2k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/dkmilk/article/details/104802349

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Html

<div id="nav">	
	<ul class="list">
		<li class="item">菜单1</li>
		<li class="item">菜单2</li>
		<li class="item">菜单3</li>
		<li class="item">菜单4</li>
		<li class="item">菜单5</li>
		<li class="item">菜单6</li>
		<li class="item">菜单7</li>
		<li class="item">菜单8</li>
	</ul>
</div>

CSS

<style>
    body{
        width:100%;
        overflow-x:hidden;
    }
    li{
        list-style:none;
    }
    #nav{
        width:100%;
        height:80px;
        overflow-x:scroll;
        position:relative;
    }
    #nav:before{
        content:'';
        position:absolute;
        display:block;
        width:100%;
        height:10px;
        background:#fff;
        left:0;
        bottom:0;
        z-index:20;
    }
    .list{
        width:500%;
        box-sizing:border-box;
    }
    .item{
        float:left;
        width:150px;
        height:50px;
        font-size:30px;
        line-height:50px;
        margin-right:30px;
        text-align:center;
    }
</style>