真正的移动友好的响应菜单四要素

有数以百计的方法来创建响应式导航，仅受限于你的创造力和CSS实现的界限是什么。良好的响应式导航是有点困难–响应菜单必须成为一个移动的菜单，坚持需求和触摸驱动装置的规定。手机设计是快速变化的，所以技术也进化。在这个教程中，你将学习哪些移动友好的响应菜单绝对需要现在和你如何解决一些常见的问题。

基础知识

当设计一个响应的菜单，你必须首先考虑移动状态，用户将如何与它互动。良好的移动导航包含以下原则：

    菜单切换很容易识别
    所有的按钮和链接，大到可以用指尖
    提供反馈当一个项目被窃听
    子仍然可以访问
    视觉效果是保持简单
    代码使用的是跨浏览器兼容

例如，我将步行通过一个简单的响应菜单设计，以水平菜单并将其转换成了画布菜单时，屏幕尺寸是768像素以内，包括平板电脑和智能手机。然后我会告诉你如何处理转换成一个更复杂的菜单，下拉菜单，伪元素和过渡到一个应用程序风格的移动友好的垂直菜单。

每个菜单主要有四个部分：

    元素用户点击进入菜单，亲切地称为切换
    菜单本身
    当转换应该发生
    如何转换发生

你还需要一个视口元标签在你的要保持平直，但希望你已经知道：

<meta name=“视口”content=“宽度=设备宽度，初始规模= 1”>

从画布菜单

虽然我们已经看到了帆布抽屉的网页设计已经有一段时间了，谷歌的材料设计模式库移动设计的介绍目前由网页设计师寻找坚实的指导采用移动第一网站。关闭画布栏或菜单是谷歌推荐的方式移动导航，因为它与大多数设备和布局好。你不需要如果你不想遵守了菜单的设计指南，但可以在间距和行为上遵循它的建议。

在我们的例子中，菜单是由一个非常简单的无序列表。

< UL ID =值>
 
 <李class=“切换”>
 
＜div class=“聚类”> < / DIV > < div class=“bar2”> < / DIV > < div class=“bar3”> < / DIV >
 
 </李>
 
 <李> < a href =”“>家</a> </李>
 
 <李> < a href =”“>组合</a> </李>
 
 <李> < a href =”“>博客</a> </李> <
 
李> < a href =”“>接触</a> </李> <
 
 / UL >

一把帆布菜单滑动和推动布局的工作，你需要把所有的东西都在DIV。这DIV需要至少一个相对位置（所以我们绝对定位元素知道坐）和理想的过渡使其变流好。

容器。{
 
位置：相对；
 
过渡：所有0.3s

1–菜单切换

这个菜单有更多的文本链接比可以舒舒服服地放在智能手机屏幕的水平，所以我们需要把它转换成一个垂直菜单。让我们的用户体验更好，我们要给用户一个菜单切换访问此垂直菜单。而汉堡菜单快速脱离流行的桌面网站设计，它仍然是移动用户识别最熟悉的界面元素。

我们可以让自己的元素，在切换菜单之外，但这种实现，将其置于菜单可以让我们少写CSS和jQuery来处理它的变化将导致更一致的显示和行为在所有设备和移动浏览器。

我选择来创建这个图标的div元素，而不是使用一个图标字体或Unicode字符，因为它将使我们的动画和转换成X菜单打开时。这里是如何创建三条：

# NAV。拨动{
 
显示：无；
 
位置：绝对的；
 
左：- 55px；
 
顶：0；
 
鼠标指针；
 
背景：RGBA（0, 0, 0、0.6）；
 
填充：15px 15px 10px；
 
 }
 
 
 
 #资产净值。切换。bar1，
 
 # NAV。切换。2，
 
 # NAV。切换。bar3 {
 
宽度：25px；

我们不想让汉堡在桌面布局可见，所以我们使用显示：无；作为一个默认的状态。该按钮位于左上方的帆布抽屉。一个常见的错误是，在桌面的设计–过于复杂的方式去了解这方面的定位切换。总是对的切换与控制元件。

这个高度和宽度由是切换衬垫，结束了在55px平方。苹果iPhone人机界面指南推荐的最小目标尺寸的吗？44px？宽44px？个子高高的，而微软的Windows Phone的用户界面设计和交互指南建议至少34px触摸目标大小。Android使用DP在其设计的标准单元，推荐48dp可在大多数屏幕48px。我们保证我们55px覆盖。

最后，该过渡在每一条处理的时间转型我们将添加在窃听或点击。

2–菜单

这种特殊的菜单风格非常简单。重要的一点是用来设置每个列表项下另一个内联块属性，利用漂浮的首选方法。在下一节中，你会看到这些主要的声明改变菜单的垂直。

# NAV {
 
文本对齐：中心；
 
保证金：0；
 
填充：15px 0；
 
宽度：100%；
 
 }
 
 
 
 # NAV李{

3–媒体查询和点击事件

这“媒体查询采用封闭方式只有当视图是768px宽或更小，平板电脑和智能手机的典型尺寸。要查看完整的代码演示上面的CSS标签。下面突出的重要一部分，从原来的风格样式的变化：

“媒体（最大宽度：768px）{
 
。拨动{
 
显示：块；
 
 }
 
 # NAV {
 
宽度：230px；
 
高度：100%；
 
位置：绝对的；
 
顶：0；
 
右：- 230px；
 
 }
 
 # NAV李{
 
显示：块；
 
 }
 
 # NAV李：悬停，# NAV李：焦点{
 
边框颜色：透明；
 
背景：

首先我们改变显示：无；我们的汉堡显示：块；所以，它是可见的。

接下来，我们改变宽度的资产净值从100%到230px并给它一个高度100%，以前是在75px休息，基于导航链接字体大小和填充高度自适应。

导航定位绝对使用负价值等于它的宽度是用来抵消容器230px向左移动，我们将在下一节。

让我们的列表项堆叠水平，我们重置内联块与块。

最后，在保持移动用户的想法，我们需要添加一个焦点国家在各环节利用，作为在不影响触摸屏。我们还添加了：hover状态这个规则对于桌面用户，可能是浏览器窗口大小。

我们要切换到打开菜单时，它与触摸设备点击。我们也希望菜单滑动和移动内容而非下拉或重叠。这有助于避免问题长菜单或widges掩盖内容，防止不必要的滚动条和避免问题的菜单的内容如闪光或帆布元素与较高的Z顺序夹。

处理单击动作，我们将使用一个非常简单的jQuery代码段：

$（document）。准备（function() {
 
 $（'切换'），点击（function() {
 
 $（' #资产净值”）。toggleClass（打开的）；
 
 $（'容器'），toggleClass（'menu-open '）；
 
 }）；
 
；

这将会检测点击（或自来水）的切换和添加一个类开放到#资产净值一类菜单打开在主容器包装我们的布局。这些课程将使我们能够申请将它绑在一起。记住添加jQuery库你的项目工作！
4–行为

现在我们进入如何使菜单表现很好CSS3转换。我们刚刚添加一个jQuery代码段，添加一个类菜单打开我们的容器DIV当切换点。我们可以将这类左移与容器样式规则翻译（在它以外的绝对定位元素的一切）。我们使用一个负值移动容器的左，因为菜单是正确的。

。container.menu-open {
 
变换：翻译（- 230px，0）；

改变我们的汉堡到X的开放类是用来设置组合旋转和翻译移动bar1和三维直方图成对角线，并隐藏2使用不透明度。你可以使用显示：无打开（放）2，但它不会利用过渡效果，只是眨眼消失。

# nav.open。酒吧。bar1 {
 
变换：旋转（45deg）翻译（8 7px）；
 
 }
 
 
 
 # nav.open。酒吧。2 {
 
不透明度：0；
 
 }
 
 
 
 # nav.open。酒吧。bar3 {
 
变换：旋转（45度翻译（7px，-）

这是转换成了画布的横向菜单菜单使用媒体查询的基础知识，以及使用jQuery来检测点击事件显示。

在下面的这个例子中，我将向你展示一个更复杂的菜单和如何具体问题如下拉工作和如何使用jQuery检测屏幕宽度。
多层次的手机菜单

我不会说这个菜单的设计–细节检查在演示的代码标签，看我如何使用布局和改变下拉作用高度值的一些基本的转换flexbox。下面，我将重点放在如何将这些类多个顶级链接菜单，子菜单的多个层面，而需要以同样的标题元素标志对齐。我们最需要的横向菜单的行为和布局，在移动设备上的变化，但视觉风格保持一致。

这个菜单使用一些你已经从过去的例子学到的技术，如将汉堡菜单添加类jQuery控制行为。下面，我将重点放在特定的移动菜单突出的主要区别。

在我们的资产净值有三个主要元素，标志，汉堡菜单，主菜单，从一个标准的无序列表创建。

<资产净值ID = 'flexmenu”>
 
＜div class=“标志”>
 
 < a href =”“> <h1>风格</h1> </a>
 
 < / DIV >
 
 <divid=“手机肘”class=“按钮”> < / DIV >
 
＜UL id =“主菜单”>
 
 <李>…</李> <
 
 UL类”子菜单的“>
 
 <李>…</李> <
 
 / UL >
 
 <李>…</李>
 
…等
 
 < / UL >
 
 < /导航>

这是由我们的内容的容器，我们想向下移动，当移动菜单切换开。像其他的菜单，这就需要我们添加一个相对的位置至少：

#main{
    height: 100vh;
    width: 100vw;
    position: relative;
}

1 – Mobile Toggle

The toggle in this demo is a separate div outside of the main menu structure. We could do it the same way as the previous example, but menus generated by systems like WordPress don’t allow that, so giving it its own element in the markup is easier to deal with.

当造型的切换，继续推荐触摸大小记在心里，并给它一个高Z指数确保它永远不会被掩盖的内容重叠。保持开关的地方，你也需要绝对的位置。由于我们的菜单会从切换扩展，而不是从画布，我们可以在这里使用正常值。

 
。按钮{
 
背景：# 751cec；
 
宽度：60px；
 
高度：48px；
 
位置：绝对的；
 
右：0；
 
顶：0

切换本身是以类似的方式对我们最后的切换伪元素创建的，因此很容易转换成X以后。
2–菜单

我们不需要做太多风格的菜单的移动状态，除了引起问题的横向菜单复位方式。大多数的工作，进场时应对下拉。你总是可以迫使所有的子菜单将扩大为默认，但这可能导致长期的菜单，滚动–力本身的问题。最好是把他们变成手风琴，扩大当抽头。比较原始和移动规则：

# flexmenu UL UL {
 
位置：绝对的；
 
左：- 9999px；
 
 }
 
 
 
 # flexmenu UL UL UL {
 
 margin-left: 100%；
 
顶：0；
 
 }
 
 
 
 @媒体屏幕（最大宽度：768px）{
 
 
 
 # flexmenu UL UL，
 
 # flexmenu UL UL UL {
 
位置：相对；
 
左：0；
 
宽度：100%

在我们的子菜单风格，下拉了绝对的位置“其母联系下，和负值用于创建洗牌效应当它盘旋。三级菜单被推到100%的宽度其母用边缘所以它弹出的权利。我们重新为手机版，子菜单就可以得出它的父。由于没有徘徊，我们也不需要定位技巧。
3–媒体查询和点击事件

你已经看到了媒体查询用的房子我们的移动菜单的风格和重置，所以我会跳过jQuery吧。

在这里，我们使用jQuery做两件事：检测点击添加CSS类，并检测屏幕大小来确定类的删除的情况下，页面没有加载之间的变化。

当元素的按钮班点，一菜单打开添加类。如果再次单击，类被删除。

$（这）找到（'按钮），（听到咔哒声，函数（）{
 
 $（这）。toggleClass（'menu-opened '）；
 
 VAR MainMenu =美元（这）。下一个（'ul '）；
 
如果（主菜单。hasclass（‘’））{
 
主菜单。slidetoggle()。removeClass（打开的）；

这也增加了一个开放类是影响子元素，这是仅用于查询下，虽然你可以使用CSS如果你想。

    在这里，我们找到的所有实例锂其次是UL，显示子菜单的存在，并添加一个类有子这个子菜单UL。
    所有项目的有子课堂上获得一个下拉切换与类子菜单按钮这是我们的风格，“媒体查询。
    当子菜单按钮点击，得到一类子菜单打开，和公开课是有兄弟姐妹和删除slidetogglejQuery的动画添加。

这是什么创造了手风琴的基本解剖，以及我们如何管理这些元素的造型以最有效的方式，不写每一吨不必要的CSS选择器或单独的单击事件。

flexmenu。找到（李UL）。parent() .addClass（'has-sub '）；
 
 subtoggle =函数（）{
 
 flexmenu。找到（'。有子”）。在（“<跨度class=”子菜单按钮“> < /跨度>”）；
 
 flexmenu。找到（'。”子菜单按钮），（听到咔哒声，函数（）{
 
 $（这）。toggleClass（'submenu-opened '）；
 
如果（$（this），兄弟姐妹（'ul”）。hasClass（‘’））{
 
 $（这），兄弟姐妹（'ul”removeClass）。（打开的）。slidetoggle()；
 
 } {
美元其他
（这），兄弟姐妹（'ul”）。addClass（打开的）。slidetoggle()；
；

最后，让我们添加一个调整修复。这只是使事情发生我们需要他们如果浏览器被调整的方式，在活动方式和查询移动视图依赖没有正确触发。

resizefix =函数（）{ var
 
 mediasize = 768；
 
如果（$（窗口）。width() > mediasize）{
 
 flexmenu。发现（'ul”）。show()；
 
 }
 
如果（$（窗口）。width() <= mediasize）{
 
 flexmenu找到（'ul。”）。hide()。removeClass（打开的）；
 
 }
 
 }；
 
 resizefix()；
 
返回$（；

4 - Behavior

菜单上的最后涉及到改造切换，和菜单上滑下来。

首先我们将利用这菜单打开了。类添加到我们的按钮通过单击切换jQuery添加一些风格的变化和转型到旋转酒吧为X：

。按钮。菜单打开：
 
过渡后{：所有的s缓解；
 
顶：23px；
 
边境：0；
 
高度：2px；
 
宽度：19px；
 
背景：# FFF；
 
变换：旋转（45deg）；
 
 }
 
按钮。。菜单打开：在{
 
顶：23px；
 
背景：

这个过渡负责制定国家之间的变化显得光滑。在这里可以了解更多的关于转换。

是这么回事！菜单是块元素，所以它自然会推动内容容器下。
结论

只要你用手机导航的基本知识，你的响应菜单-确保链接和切换响应水龙头，足够大，足够简单，转换工作在大多数移动设备和浏览器，你不应该遇到很多问题。

反应是一种特殊的艺术，需要大量的用户行为的理解和研究，CSS单位和总体设计，但是了解如何您可以将菜单和工具，帮助你最会让你对你的方式来建立自己的实现，适合您的项目的最佳。下面是一些资源进入这里所使用的技术的更多细节，并在那里你可以找到更棒的例子。