移动端横向滑动菜单的最佳实践_随笔

原文： https://uxdesign.cc/best-practices-for-horizontal-lists-in-mobile-21480b9b73e5

1. 用户最习惯和最自然的是使用纵滑菜单，这是最优选

2. 横向滑动菜单是在呈现不同类型的同一方式（规则）

3. 使用横向滑动菜单的规则：

一、显示滚动条

二、显示“更多、全部”

三、限制显示的数量

四、滚动时显示下一个的部分页面，暗示后面会有内容

五、在菜单开头和结尾显示更多空间以表示内容的开始或完结，纵

滑的的菜单结尾也可以加一个渐变的光在下面（虽然比较少见）

4. 别把头部tab和横向侧滑混淆，可以横向侧滑的时候禁用tab或者禁用tab的侧滑功能，直接用点击

5. 横向侧滑的替代，用网格之类，比如四个一块的小方格

给！

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

1、用Dreamweaver新建一个HTML文件。

2、修改title为html+css实现横向导航。

3、新建一个div id为“a”，添加ul li标签。

4、在li中添加自己想要的文字并调整好文字间距,按F12预览。

5、首先去掉字体前面的小黑点。

6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果。

7、按F12预览，效果如下。

欢迎分享，转载请注明来源：内存溢出

移动端横向滑动菜单的最佳实践