【实测】 css左右滑动菜单-Discuz教程下载

【实测】 css左右滑动菜单

来自版块: Discuz教程发表于: 2024-1-22 14:09:15
2652
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下
CSS中可以使用overflow-x属性来创建水平滚动的效果。下面是一个示例代码:

html部分:
  1. <div class="menu">
  2.    <ul>
  3.       <li><a href="https://www.tuyuanma.com/id/2/1">独家资源</a></li>
  4.       <li><a href="https://www.tuyuanma.com/daohang/">站长导航</a></li>
  5.       <li><a href="https://www.tuyuanma.com/news/">技术分享</a></li>
  6.       <!-- 更多菜单项... -->
  7.    </ul>
  8. </div>
复制代码
CSS部分:
  1. .menu {
  2.     width: 400px; /* 设置容器宽度 */
  3.     overflow-x: auto; /* 开启水平溢出自动隐藏功能 */
  4. }

  5. .menu ul {
  6.     list-style-type: none; /* 去除默认列表样式 */
  7.     padding: 0; /* 清空内边距 */
  8.     margin: 0; /* 清空外边距 */
  9.     white-space: nowrap; /* 不换行显示所有元素 */
  10. }

  11. .menu li {
  12.     display: inline-block; /* 将每个菜单项放在同一行上 */
  13.     margin-right: 5px; /* 添加间距 */
  14. }
复制代码
这段代码会创建一个具有左右滑动效果的菜单。当菜单项超过容器宽度时,就会出现水平滚动条供用户进行浏览。

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部