我们将构建一个简单的响应式网站导航。 我们的解决方案将帮助我们强调页面的内容 ，可以说是设计移动设备时的重中之重。 不会涉及JavaScript，我们将通过Mobile First方法解决它。
什么是移动导航？
如果您已阅读Luke Wroblewski的《 Mobile First》，您将熟悉他的陈述：
“通常，内容优先于移动设备上的导航。”
他的意思是，移动用户经常在寻找即时答案。 他们想要他们要搜索的内容，而不是更多的导航选项。
许多站点，甚至是响应站点，都遵循导航属于任何给定页面顶部的约定。 这种方法可能会在移动设备上引起可用性问题，因为移动用户通常缺少两件事：屏幕空间和时间。 如果主要的移动导航位于页面顶部，则很有可能会遮盖整个屏幕。
大型触摸式菜单链接进一步加剧了此问题，迫使用户滚动到导航之外，以获取任何有价值的内容。
以London＆Partners为例：
完美的响应式设计，但是在标准移动视口尺寸（320像素x 480像素）下，您真正看到的只是一个导航菜单。 当然，刚到达首页后，我还想看到其他内容吗？ 证明这一点的不仅是伦敦＆合作伙伴。 在网络上的许多响应式设计中都可以看到这种做法。
那么，有什么解决方案？
我们已经看到了几种解决方法，通常依靠jQuery为我们解决问题。 请看Chris Coyier对“ 五个简单步骤”响应式下拉菜单的说明。
使用jQuery，以下拉列表的形式创建菜单的副本，最初使用CSS将其隐藏在视图中。 媒体查询检测到较小的屏幕时，它们使下拉菜单可见，而原始导航不可见。 这对于移动设备来说是完美的选择，因为下拉菜单占用的空间很小，并且可以使用设备的特定UI（例如iPhone的滚动条）。
或者，您可以隐藏导航，但是单击菜单按钮时可以将其转换为视图。 您可以在最新的Bootstrap中看到这种效果。
较小的屏幕会隐藏导航链接，并显示一个“列表”图标（Swift被接受为“菜单”的意思），单击该图标可显示导航。 同样，向移动访问者展示了尽可能多的内容，但是如果他们需要，可以使用导航选项。
纯CSS移动导航解决方案
我们将使用Luke讨论的技术，该技术利用CSS和Mobile First方法。 “移动优先”方法是什么意思？ 简而言之，我们将设计一个简单明了的移动版式，然后逐步增强大屏幕的设计。 我们将使用媒体查询来检测不断增长的屏幕尺寸，添加样式和功能。
这意味着当使用移动设备查看我们的设计时，将仅加载最少CSS和资源。 这也意味着较旧版本的IE（无法识别媒体查询）将随移动网站一起显示。 有关更多信息，请查看Joni Korpi的Leaving Old Internet Explorer Behind 。
1.标记
我将逐步解释该解决方案背后的想法，因此暂时让我们一起整理一些标记，首先是一个空白HTML5文档。
Mobile First Responsive Navigation
注意： 不要忘记视口元标记！
完成此操作后，我们将添加一些页面结构。 简单明了的东西，所有这些都是为了演示的目的。 我使用了Monty Python的Holy Grail（感谢Chris Valleskey ）写的填充文字，这是在工作时在脸上露出笑容的好方法:)
Nav
Blue. No, yel…
Shut up! Will you shut up?! But you are dressed as one… Camelot! You don’t vote for kings.
We want a shrubbery!!
Look, my liege! Shut up! But you are dressed as one…
- The nose?
- Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!
- Look, my liege!
Help, help, I’m being repressed!
Why? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Be quiet! A newt?
2.导航标记
我们整理了一个基本的html页面，现在是时候吸引大家了。 我们的主要导航
是的，您已经正确看到了，我们在上一篇文章之后的第68行中添加了它。 不要忘记我们现在正在为移动设备设计，稍后我们将介绍台式机。 我们已将导航放置在页面的底部，以便完全避免干扰。 现在，我们将在页面顶部放置一个链接，以便用户可以根据需要找到导航。
Nav
Menu
3. CSS重置
根据您通常开始Web项目的方式，此步骤与您通常的工作流程不同。 我总是发现埃里克·梅耶（Eric Meyer）的重做是工作的坚实基础，尤其是在他最近进行调整时 。 我们将他的重置规则添加到样式表中，以开始我们CSS：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ’’;
content: none;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}4.基本样式
目前，我们的页面看起来很没用。
..so让我们通过添加一些简单的样式来改进它们。
/*begin our styles*/
body {
font: 16px/1.4em ’PT Sans’, sans-serif;;
color: #1c1c1c;
}
p,
ul {
margin: 0 0 1.5em;
}
ul {
list-style: disc;
padding: 0 0 0 20px;
}
a {
color: #1D745A;
}
h1 {
}
h2 {
font-family: ’PT Serif’, serif;
font-size: 32px;
line-height: 1.4em;
margin: 0 0 .4em;
font-weight: bold;
}
/*layout*/
.wrapper {
}
article {
border-bottom: 1px solid #d8d8d8;
padding: 10px 20px 0 20px;
margin: 10px 0;
}
/*header*/
header {
background: #1c1c1c;
padding: 15px 20px;
}
/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
header:before,
header:after {
content:"";
display:table;
}
header:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
header {
zoom:1;
}
h1.logo a {
color: #d8d8d8;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
line-height: 22px;
float: left;
letter-spacing: 0.2em;
}
a.to_nav {
float: right;
color: #fff;
background: #4e4e4e;
text-decoration: none;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
line-height: 22px;
height: 22px;
text-transform: uppercase;
letter-spacing: 0.1em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
a.to_nav:hover,
a.to_nav:focus {
color: #1c1c1c;
background: #ccc;
} 这些都是基本的东西（字体，行高，颜色等），到目前为止，至关重要的是我设置了“菜单”按钮的样式，使其浮动到
如果将鼠标悬停在其上，您将看到悬停状态-当然对于触摸屏设备而言不是必需的，但是这种体验也将提供给不合作的Internet Explorer版本。 我们已经为移动用户的利益定义是:focus状态。 它与:hover状态相同，但是将为触摸屏设备提供关键的反馈。 我们的用户将知道他们已经成功地触摸了菜单按钮。
无论如何，单击它，您将被带到导航栏中，超级。
现在让我们对菜单进行一些样式设置。
5.导航样式
实际上，我们将像之前显示的“伦敦与合作伙伴”示例那样，对主要导航进行样式设置，只是这次显然在页面底部。
/*navigation*/
#primary_nav ul {
list-style: none;
background: #1c1c1c;
padding: 5px 0;
}
#primary_nav li a {
display: block;
padding: 0 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.1em;
line-height: 2em;
height: 2em;
border-bottom: 1px solid #383838;
}
#primary_nav li:last-child a {
border-bottom: none;
}
#primary_nav li a:hover,
#primary_nav li a:focus {
color: #1c1c1c;
background: #ccc;
}
/*footer*/
footer {
font-family: ’PT Serif’, serif;
font-style: italic;
text-align: center;
font-size: 14px;
} 好多了。 我们已经使菜单链接变得美观大方了（在Luke Wroblewski自己的博客上了解有关“ 触摸目标尺寸”的更多信息），并再次确定了:focus状态供用户反馈。
同样很明显，我们包含了一个“顶部”链接，如果需要的话，该链接会将用户带回到页面顶部。
6.变得更大
好的，我们已经处理了简单的移动布局，现在是时候进行一些渐进式增强了。 我们将使用媒体查询来确定何时不再适合我们的移动版式。
但是什么时候变得不合适呢？ 处理媒体查询的方法有很多，但是我们将基于移动视口为320px x 480px的基础进行工作。 纵向查看时宽为320px，横向查看时宽为480px，因此我们可以合理地设置第一个媒体查询以检测任何大于480px的屏幕。
但是，下一步可以说是平板电脑。 iPad的分辨率为980px x 768px，因此我们可以放心地假设任何小于768px的像素都适合我们的移动版式。 任何大于768像素的像素都可以处理更多类似桌面的导航布局。
因此，我们可以开始添加规则，因此让我们设置一个媒体查询：
/*media queries*/
@media only screen and (min-width: 768px) {
}当视口宽度至少为768px时，此媒体查询将运行其中包含的所有样式。 请注意，其中包含了only关键字，以确保Internet Explorer 8不会引起混乱，并尝试处理查询。 有关详细信息，请参见我之前的解释 。
让我们通过使“菜单”按钮消失来开始事情：
@media only screen and (min-width: 768px) {
a.to_nav {
display: none;
}
}随着浏览器稍微变宽，菜单按钮将不再显示。
7.转移导航
现在，我们需要将主要导航置于页面顶部。 为此，我们将其从文档流中删除，并将其绝对定位在顶部。
@media only screen and (min-width: 768px) {
a.to_nav {
display: none;
}
.wrapper {
position: relative;
width: 768px;
margin: auto;
}
#primary_nav {
position: absolute;
top: 5px;
right: 10px;
background: none;
}
#primary_nav li {
display: inline;
}
#primary_nav li a {
float: left;
border: none;
padding: 0 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
} 为了使这种可能性成为可能，我们首先必须使其父级（ .wrapper ）相对定位。 我们可以在媒体查询中执行此操作，也可以在样式表的开始处确定。
绝对放置好菜单后，我们需要删除一些锚定样式。 不需要做很多事情，但是我们需要列表项以内联方式显示，并且需要从锚点删除边框和过大的填充。 当然，我们之前指定的悬停状态很好，因此我们不需要更改它们。
8.最后一件事
如果您一直在关注，您会发现导航中仍然有一个“顶部”链接-我们真的不需要了吗？
我们可以通过多种方式删除它，但是我们可以确定发生了什么，我们首先将一个类添加到列表项中：
Top 然后我们可以在媒体查询中删除它：
#primary_nav li.top {
display: none;
}结论
而已！ 有很多方法可以基于此想法（将列表图标仅实现为一个），当然，您可以继续添加媒体查询来满足不断增长的屏幕需求。
希望您现在有这样做的基础。 我们从移动优先的角度出发，创建了一种简单，触摸友好的响应式导航，同时着重于内容和可用性。 谁可以要求更多？
本教程中提到的一些有用链接，全部链接在一个方便的列表中：
Envato市场上有大量的移动优先设计模板，可立即在您的项目中使用。
翻译自: https://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074