CSS3做一个手机端左右滑动菜单

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

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

HTML代码

<div>
<a href="https://www.wdzzz.com/moban/ecms/">帝国cms模板</a>
<a href="https://www.wdzzz.com/moban/dedecms/">织梦cms模板</a>
<a href="https://www.wdzzz.com/moban/discuz/">discuz模板</a>
<a href="https://www.wdzzz.com/moban/ecshop/">ecshop模板</a>
<a href="https://www.wdzzz.com/moban/phpcms/">phpcms模板</a>
<a href="https://www.wdzzz.com/moban/wordpress/">wordpress模板</a>
<a href="https://www.wdzzz.com/moban/maccms/">苹果cms模板</a>
<a href="https://www.wdzzz.com/moban/seacms/">海洋cms模板</a>
<a href="https://www.wdzzz.com/moban/feifeicms/">飞飞cms模板</a>
<a href="https://www.wdzzz.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

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

相关专题

css

2021-09-24 79

css是前端开发中的样式语言,学好CSS可以帮助开发出漂亮的模板,css专题为您整理本站所有css相关信息,包含css模板下载,css使用教程分享和css示例代码....

• css3海浪波浪动态效果代码 [2021-10-25]
• css样式内加载其他CSS文件方法 [2021-09-27]
• HTML5+CSS3前端开发基础入门视频教程 [2021-09-16]
• HTML+CSS物业后台管理系统模板 [2021-08-15]
• HTML5/CSS3响应式Synthetica团队介绍模板 [2021-04-06]