10 个用于创建响应式导航的 CSS 和 JavaScript 代码片段

一个好的响应式网站最复杂的部分之一是导航。 这可能需要一段时间才能弄清楚，并且有很多教程可以帮助解决这个问题。 但我也喜欢使用我们为本文收集的代码片段。

所有这些响应式导航片段都可以为您自己的项目免费编辑和克隆。 它们还具有多种样式，因此这里会有适用于所有类型网站的东西。

1. Johnny Mango 的响应式整页布局

这个响应式示例显示了您可以在网站的原型设计阶段走多远。 当您悬停并自动关注链接时，您会注意到导航具有一个有趣的功能。 可以在具有相同导航的“实时”网站上更改此效果，但在此示例中展示页面的 UI/UX 很有用。

请参阅 Johnny Mango 的带有 Kube 的 Pen 响应式导航演示

2. Tania Rascia 的下拉导航栏

如果您在导航中需要更长的下拉项目，那么此菜单可能会更好。 它是仅具有少数菜单项的更基本导航的强大替代方案。 在这种情况下，您会找到一个带有非常小的下拉列表的简单链接列表。 子菜单链接仅出现在由 jQuery 处理的单击事件上。 您可以将其更改为仅 CSS，但您将丢失点击触发器。

尽管如此，对于如此简洁的设计，我对这个片段为开发人员提供的多功能性感到惊讶。

请参阅 Tania Rascia 的 Pen 响应式下拉导航栏

3. Jan Czizikow 的单页布局

单页导航菜单和其他菜单一样需要爱。 这是一个完美的单页导航示例。 链接以流畅的动画向下滚动，但不要让您等待太久。

更不用说，无论您的浏览器大小如何，它们都会自动调整大小以完美契合。 我主要推荐这种类型的导航用于销售页面或简单的投资组合网站。 它很干净，并具有一些出色的动画功能以及响应式技术。

查看 Pen 使用 CSS 动画和 jQuery 的完全响应式导航，作者 Jan Czizikow

4. Stephanie Walter 的红色下拉菜单

开发人员 Stephanie Walter 为 Web 构建了一些令人兴奋的项目。 这个片段只是一个具有鲜红色响应式导航的示例。

这些链接具有更多的魅力，具有自定义选择功能和良好的悬停效果。 调整大小时，您会注意到导航使用的是滑动下拉菜单。 我几乎会选择移动链接的块级列表，但考虑到子菜单，这会更好。

参见 Stephanie Walter 的 Pen Responsive navigation multilevel

5. Ahmad Hjazy 的纯 CSS 设计

这是一个使用纯 CSS 进行导航的独特设计。 这是一个带有模仿元素周期表的导航链接的垂直菜单。

悬停效果有点延迟，但无疑很有趣。 更不用说响应式风格令人惊讶地可用。 也许最令人印象深刻的部分是整个示例如何仅使用 CSS 。

请参阅 Ahmad Hjazy 的 Pen CSS 响应式导航菜单

6. Marc Libunao 的响应式 Sticky Header

我在前面的片段中提到了单页设计，这个响应式标题遵循类似的轨迹。 唯一的区别是这个导航在页面上有一个稍微大一点的块，它处理响应式页面设计有点不同。

当您调整浏览器大小时，您会注意到此示例使用带有有趣动画的汉堡图标。 考虑到这种风格很好，但可能不是每个人。

请参阅 MarcLibunao 的 Pen Responsive Sticky header navigation

7. Dragoeco的响应式和触摸友好

所有好的网站都应该默认是触摸友好的，这就是让这个导航对设计师更具吸引力的原因。

每个链接都会指向一个新页面，但您可以在任何基于触摸的设备上轻松点击以悬停下拉菜单。 导航菜单中经常缺少此功能，这也是下拉菜单难以设计的原因之一。

查看笔下拉导航：Dragoeco 的响应式和触摸友好

8. AnabolicHippo 的简单导航链接

当我想到简单的导航菜单时，我会想到这样的设计。 每个链接都显示为自己的块元素，即使在较小的屏幕上也是如此。 没有汉堡菜单，也没有隐藏的动画菜单功能。 相反，链接会调整大小并分成单独的行。

最棘手的部分是处理移动设备上的下拉效果。 许多链接都有子菜单，它们在较小的屏幕上也能正常工作。

我认为这对于很少或没有子菜单的网站最有效，但值得在移动设备上尝试以了解您对体验的看法。

请参阅 AnabolicHippo 的笔响应式导航菜单

9. Louis Chenais 的Playstation 窗帘菜单

开发人员 Louis Chenais 基于 PlayStation 网站创建了我最喜欢的响应式导航之一。 路易斯称之为“窗帘菜单”，它滑入视野，占据整个页面。 这对于移动界面很常见，并且很快在网页设计师中流行起来。

我真正喜欢的一件事是动画风格。 它既时尚又快速，足以显示链接而不会让用户感到无聊。 最重要的是，这感觉就像它可以在生产网站上运行。

请参阅笔响应式导航原则 #3 – Louis Chenais 的窗帘菜单

10. Samir Alley的响应式超级菜单

您可以搜索网络并找到数百个大型导航菜单示例。 这些通常出现在较大的博客和新闻网站上，但它们在电子商务商店或大型代理网站上也很受欢迎。 大型菜单最困难的部分是使其完全响应。 由于这个小片段，您可以重新设计大型菜单设计以轻松适应任何屏幕。

在移动设备上，它使用滑动导航在一个菜单中显示所有内部链接。 这可能看起来有点烦人，但如果有意义的话，您也可以使用 jQuery 隐藏子链接。 它仍然是我见过的最好的响应解决方案之一，可以在桌面上运行大型菜单而不会疏远移动用户。

请参阅 Pen Responsive Mega Menu – Navigation by samir alley