使用CSS3创建手机端左右滑动菜单

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS3动画 CSS3教程

CSS3可以通过使用`overflow-x: auto;`属性和`white-space: nowrap;`属性来实现一个左右滑动的菜单。首先，将菜单项放入一个容器中，并设置容器的宽度为固定值。然后，为容器添加`overflow-x: auto;`属性，这样当菜单项的总宽度超过容器宽度时，就会出现水平滚动条。最后，为菜单项添加`white-space: nowrap;`属性，使菜单项在同一行显示。这样就可以实现一个简单的手机端左右滑动菜单了。

手机端因为布局很窄，如果刚好菜单很多的情况下，我们就可以把菜单左侧左右滑动的效果，来节省空间，大致效果如下图

具体效果可以参考今日头条，菜单可以左右滑动。有些花里胡哨的代码会用上JS，其实这种只需要CSS就能搞定，下面看代码。

HTML代码

<div><ahref="https://www.caijicaiji.com/moban/ecms/">帝国cms模板</a><ahref="https://www.caijicaiji.com/moban/dedecms/">织梦cms模板</a><ahref="https://www.caijicaiji.com/moban/discuz/">discuz模板</a><ahref="https://www.caijicaiji.com/moban/ecshop/">ecshop模板</a><ahref="https://www.caijicaiji.com/moban/phpcms/">phpcms模板</a><ahref="https://www.caijicaiji.com/moban/wordpress/">wordpress模板</a><ahref="https://www.caijicaiji.com/moban/maccms/">苹果cms模板</a><ahref="https://www.caijicaiji.com/moban/seacms/">海洋cms模板</a><ahref="https://www.caijicaiji.com/moban/feifeicms/">飞飞cms模板</a><ahref="https://www.caijicaiji.com/moban/html/">html模板</a></div>

CSS代码

div{overflow:hidden;overflow-x:scroll;-webkit-overflow-scrolling:touch;white-space:nowrap;}a{display:inline-block}

我们主要看CSS，

overflow-x:scroll;-webkit-overflow-scrolling:touch;white-space:nowrap;

加滚动条，并且隐藏搞不懂，最后内容强制不换行。

display:inline-block

这段事让块状横向排列，完工。

相关专题