【实测】 css左右滑动菜单

来自版块: Discuz教程

920

0

如本资源下载地址失效,请点击此处进行反馈

开通本站Svip会员，全站资源免费下

CSS中可以使用overflow-x属性来创建水平滚动的效果。下面是一个示例代码：

html部分：

<div class="menu">
<ul>
<li><a href="https://www.tuyuanma.com/id/2/1">独家资源</a></li>
<li><a href="https://www.tuyuanma.com/daohang/">站长导航</a></li>
<li><a href="https://www.tuyuanma.com/news/">技术分享</a></li>
</ul>
</div>

复制代码

CSS部分：

.menu {
width: 400px; /* 设置容器宽度 */
overflow-x: auto; /* 开启水平溢出自动隐藏功能 */
}
.menu ul {
list-style-type: none; /* 去除默认列表样式 */
padding: 0; /* 清空内边距 */
margin: 0; /* 清空外边距 */
white-space: nowrap; /* 不换行显示所有元素 */
}
.menu li {
display: inline-block; /* 将每个菜单项放在同一行上 */
margin-right: 5px; /* 添加间距 */
}

复制代码

这段代码会创建一个具有左右滑动效果的菜单。当菜单项超过容器宽度时，就会出现水平滚动条供用户进行浏览。

实测，css，滑动，菜单

回复

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

Discuz教程
CSS+DIV素材

返回版块

0

0

0