移动端左右滑动的导航的简单实现方法

最新推荐文章于 2022-10-10 10:23:10 发布

余年不负韶华

最新推荐文章于 2022-10-10 10:23:10 发布

阅读量6.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3 布局解决方案移动导航

本文链接：https://blog.youkuaiyun.com/kincaid_z/article/details/77893102

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种简单的移动端水平滚动菜单实现方法。通过HTML和CSS布局，使得菜单可以在水平方向上滚动，适用于屏幕较小的移动设备。该方案使用了overflow属性控制内容超出时的行为，并通过绝对定位元素在底部创建了一个白色背景效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端类似于上图的效果的简单实现

		<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

			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;
			}