一个响应式的，触摸友好，视网膜准备的菜单，三种布局适用于不同的浏览器尺寸。
今天，我们将创建一个色彩鲜艳的视网膜准备和响应菜单的启发马里湾制造商的边疆游戏的颜色。根据浏览器窗口大小，菜单自动变为三种不同的布局之一：“桌面”内联版本，双列平板优化版本和带有菜单链接的移动版本，用于显示和隐藏较小屏幕的导航。为了使菜单完全视网膜准备就绪，我们将使用图标字体，以使菜单的图标在调整大小时不会被像素化。
请注意：某些效果只能在支持各自CSS属性的浏览器中使用。
准备图标字体
创建一个自定义的图标字体可能看起来有点复杂，但是像IcoMoon 这样的工具 只是创建图标并将其导入到工具中。图标字体的行为像任何字体，所以你可以很容易地改变颜色，适应大小，它不会被像素化。完美的视网膜设备，而不必使用不同的屏幕分辨率的多个资产。
我们需要做的第一件事就是为菜单创建图标。我使用Illustrator，但像Inkscape这样的任何矢量图形编辑器都可以。我们需要创建每个图标并将其导出为SVG文件。为了确保图标在每个浏览器中都能正常工作，我们必须将所有行转换为完整对象，并将所有对象合并为一个大图标。一旦所有的文件都被导出到很好的SVG文件中，我们可以将它们全部导入到IcoMoon App工具中：
我们也可以使用IcoMoon提供的大图书馆的图标来增强我们的字体。一旦我们拥有了所有需要的图标，我们点击页面底部的“字体”按钮来输入详细设置。在这个页面上，我们可以选择字体的编码设置，也可以选择是否为每个图标分配一些字母，或者更喜欢使用字体的专用区域来确保屏幕阅读器不能输出他们。我建议使用默认设置，工作得很好。
当我们点击“下载”时，我们得到一个4种字体格式（SVG，EOT，TTF和WOFF），CSS样式和演示页面的ZIP文件。
要使用这些图标，首先要将CSS IcoMoon提供的CSS复制粘贴到CSS文件的顶部，并确保我们也复制了字体文件夹。还有 一点点“黑客”，使Chrome的字体看起来更好， 你可能想检查一下。
为了有一个更干净的HTML，我选择创建“菜单”按钮，并将其插入到DOM使用JavaScript。当用户点击按钮时，changeClass函数帮助我们在活动类和无类之间切换类。
就这样，我们已经建立了一个很好的，触摸友好的，视网膜导航，适用于桌面，平板电脑和移动设备。希望你喜欢它！
