本文介绍了一个简单的移动端网页水平滚动菜单的实现方法，包括HTML结构搭建和CSS样式设置，通过设置特定的类名来实现水平滚动效果。
//温馨提示：此代码实现的效果只能在开发者工具的移动端页面，才能实现滚动效果
//html代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入css样式代码 -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="scrollx mescroll-touch-x">
<nav id="scrollxContent" class="scrollx-content">
<ul id="nav" class="nav">
<li class="active">推荐</li>
<li>视频</li>
<li>热点</li>
<li>社会</li>
<li>娱乐</li>
<li>军事</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
</ul>
</nav>
</div>
</body>
</html>
//css代码
// 导航
.scrollx{
overflow: hidden;
position: relative;
// 先给总的盒子设置一个高度
height: 0.6rem;
.scrollx-content{
width: 100%;
// 再在子集盒子设置overflow-x: auto;让盒子水平方向具有滚动效果
overflow-x: auto;
// 禁止换行
white-space: nowrap;
// height: .6rem;
background:@navBGColor;
border: .01rem sloid @navBDColor;
// overflow: hidden;
ul{
padding: 0 16px 0 10px;
li{
display:inline-block;
font-size: .25rem;
line-height: .59rem;
padding:0 .2rem;
margin-bottom: 30px;
&.active{
color:@navActiveFontColor;
}
}
}
}
}
扫一扫
1696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
