移动导航菜单设计中的一个共同挑战是导航菜单。如果该网站有很多的部分或网页，它变得具有挑战性，将所有的项目压缩成一个小的移动分辨率。导航最有可能结束运行成多行或按钮堆叠在顶部彼此。所以我要回顾一些设计解决方案，提供了一种快速教程如何创建一个jQuery移动导航。
问题
下面的截图显示移动的导航布局问题。如果导航有3个或4个按钮，如网页设计师墙，那么导航将不会包成2行。但如果导航包含6个或多个按钮，它们将在顶部彼此堆叠。
解决方案
1）下拉
一种常用的解决方案是将导航到一个选择下拉。我不喜欢这种方法因为<选择>元素不可设置样式和CSS。JavaScript插件选择允许您修改下拉菜单，否则你最终的默认系统下拉菜单样式。这也造成不一致的用户体验，桌面版和移动版显示链接标签显示一个下拉菜单。如果你喜欢这个解决方案，这是通过CSS技巧教程如何将菜单下拉。
2）显示为块
另一个快速修复是将每个菜单项设置为块元素，这样他们就显示垂直。但这种方法需要大量的头空间。如果导航有很多按钮，这是一个坏主意，因为在到达内容之前，读者必须向下滚动导航列表。
3）菜单图标
我要复习的最后一个解决办法是使用一个菜单图标/按钮来切换导航。我喜欢这种方法，因为它节省了三的空间（移动非常重要），它给你的造型与CSS完全控制。菜单图标可以与总体设计匹配。
jQuery移动导航（查看演示）
本教程向您展示如何创建一个jQuery在上面列出的网站看到移动导航。jQuery将用于在菜单图标，切换导航。这一招，不需要任何额外的语义HTML标签/联合。
HTML
下面是本教程中使用的示例导航HTML：
<资产净值ID =”导航包”>
< UL ID =值>
<李> < a href =“#”>按钮</a> </李>
<李> < a href =“#”>按钮</a> </李>
< / UL >
< /导航>
jQuery代码
包括一份jQuery和下面的函数在<HEAD>标签之间。该函数将前置<divid=“菜单图标”>在<资产净值=“#导航包ID标签”>。当#菜单图标元素被点击时，它就会滑下导航。
<脚本type=“text/javascript”src=“HTTP：/ / Ajax。googleapis。COM / / / jQuery的Ajax库1.7版jQuery。”> < /脚本>
<脚本type=“text/javascript”>
jQuery（document）。准备好（功能（$）{
/ * * /在菜单图标
$（“#导航包”）。在（' <divid=“菜单图标”>菜单中的< / DIV >”）；
/ * * /切换导航
$（“#菜单图标”）。在（“点击”，function() {
$（“#资产净值”）。slidetoggle()；
$（这个）。toggleclass（“主动”）；
}）；
}）；
< /脚本>
这将使HTML这样的代码（你需要检查元素或视图来查看生成的源代码）：
<资产净值ID =”导航包”>
<divid=“>菜单中的< / DIV >菜单图标
< UL ID =值>
<李> < a href =“#”>按钮</a> </李>
<李> < a href =“#”>按钮</a> </李>
< / UL >
< /导航>
CSS
我不打算解释CSS代码的每一个细节，因为它是非常直接的。相反，我会谈论的关键部分。
的#菜单图标的显示设置为：没有开始。我使用媒体查询到#菜单图标更改为显示：块如果视口的宽度小于600px。
CSS解释
在媒体查询中，我设置了导航显示：没有一个是在移动中隐藏的。当#菜单点击图标，可以切换导航为上述步骤在jQuery函数指定。
最后的演示
要看到最后的移动导航，查看演示，缩小您的浏览器窗口或检查您的手机。