本体构建骨架法_使用骨架构建响应式布局：导航

本体构建骨架法

我们的骨架布局包含许多响应性挑战，其中最重要的是主要的导航。 在这些截屏视频中，我们将通过整理基线网格，讨论图像替换，设置菜单样式以及最后使用一些jQuery来使事情变得响应来准备事情。

---

基线网格和徽标

在进入主要导航本身之前，我们需要整理一下布局的几个方面。 首先，我们需要确保到目前为止我们进行的所有测量都与基准网格保持一致。 其次，我们将讨论图像替换的替代方法，该方法重点介绍了有关性能的一些重要方面。

主要导航基地

我们主要导航的基础是带有下拉菜单和一些细微过渡的外观精美的菜单。 在此视频中，我们将介绍css下拉菜单的基本原理，以及有关性能和可访问性的一些要点（与我们在谈论图像替换时所涉及的内容有关）。

响应式导航

导航正常运行后，就该考虑移动用户的体验了。 我们将使用jQuery和CSS媒体查询将标准菜单换成<select>替代品，以适应小屏幕尺寸。

最后一点

正如Michael所提到的那样，当子菜单项从小菜单项中淹没时，它们当前所处的状态看起来很可怕：

这是因为子菜单的宽度设置为等于父链接的宽度。 链接中的文字会自动换行，整个过程都一团糟。 我们可以通过在子菜单链接中添加一条附加规则来解决此问题：

nav.primary ul ul li a {
white-space: nowrap;
}

这样可以防止文字换行，并迫使子菜单沿宽度方向增加。 好多了！

其他资源

一些有用的链接可以进一步构建这些视频中介绍的内容。

• Connor Turnbull 将Web类型设置为基线网格
• Nicolas Gallagher的CSS图像替换技术
• 杰弗里· 泽德曼（ Jeffrey Zeldman） 替换-9999px黑客
• 克里斯·科耶尔（Chris Coyier） 将菜单转换为小屏幕的下拉菜单
• Jeffrey Way的30天学习jQuery-到目前为止，掌握jQuery的最佳方法。

翻译自: https://webdesign.tutsplus.com/tutorials/building-a-responsive-layout-with-skeleton-navigation--webdesign-6385

本体构建骨架法