适用于1075个类别的快速，便捷，自适应菜单（36000个产品）

简要介绍菜单

• 99％的HTML5 + CSS3菜单，1％的JavaScript（通过单击关闭打开的类别）。
• 在移动设备上，“水平”菜单变为“手风琴菜单”。
• 在初始状态下，显示33个主菜单项中的10个，单击第11个（最右边的项目）“更多...”时，将显示其余项目。
• 在计算机上，带有菜单和产品的类别页面的“互动加载时间”为1秒，在移动设备上为5.2秒（根据developers.google.com）。
• 电脑上带有菜单和产品的类别页面的“首次内容加载时间”为0.3秒，移动设备为1秒（根据developers.google.com）。
• 通过打开和关闭菜单类别，在打开符号后，“ +”变为“-”。
• 当您打开其他菜单项时，以前打开的菜单项将关闭。
• 桌面上菜单菜单的子类别和子类别放置在没有滚动条的视口中。

菜单要求

• 通过按以下方式打开菜单...关于具有悬停功能的菜单：打开页面时，有99％的人将用鼠标越过菜单，这将通过关闭屏幕的可见部分使其显得无法计划，从而使访问者感到不适。 您可以通过打开悬停延迟来解决此问题（这样它不会立即打开），但是随后会出现“制动”菜单。
• 简报后，商店员工可以进行简单调整的简单菜单。
• 菜单应该是自适应的，带有菜单的页面应该经过css3 html5的完全验证。 页面加载速度应保持较快。

可以通过 codepen.io/andrej-sh/pen/eYOrNEZ 查看完整版菜单

HTML代码的开头

JavaScript代码说明

我原本打算不使用JavaScript，但是当我再次单击CSS时关闭打开菜单的实现似乎并没有实现radio + checkbox。 而且代码简单明了，即使被意外删除，也无法使站点无法正常工作（使用jQuery测试菜单时，站点会在5分钟内无法正常工作，因为它首先是远程连接脚本并且链接使用http而不是https）。

<script> function clickRadio(el) { var siblings = document.querySelectorAll("input[type='radio'][name='" + el.name + "']"); for (var i = 0; i < siblings.length; i++) { if (siblings[i] != el) siblings[i].oldChecked = false; } if (el.oldChecked) el.checked = false; el.oldChecked = el.checked; }</script> 

使用jQuery的类似菜单

菜单的第一个版本是jQuery，通过输入“复选框”实现。 即使通过脚本，打开和隐藏菜单时也会配置“ +-”字符的外观。 在功能和外观方面，它与前面介绍的菜单完全相同。 但是！ 下载速度明显较差。 例如，“最大潜在FID延迟”延长1秒。 “互动下载时间”长0.6-0.8秒。 “第一内容的下载时间”为0.3-0.4秒。 脚本加载时间延长0.5秒。

下载速度验证服务中的图像