响应式 - 基于媒介查询的动态导航栏

前言

媒介查询不仅限于调整图像大小。可以使用媒介查询为访问者提供更加动态的网页。可以使用媒介查询显示一个基于不同屏幕尺寸的响应式菜单。

 

准备工作

为了实现一个响应式菜单系统，我们将使用两个不同的菜单，为三种不同的浏览器窗口尺寸显示一个动态菜单。

 

实现方式

对于较小的浏览器窗口，特别是对移动设备和平板电脑，创建一个简单的select菜单，其只占用少量的垂直空间。这个菜单为导航选项使用了HTML中的form元素，通过触发JavaScript代码来加载选择的新页面。

对于较大的浏览器窗口尺寸，创建一个可以通过CSS设置样式的简单ul列表元素。这个菜单对于不同的媒介查询会接收不同的布局和外观参数，并且紧跟着select菜单被追加到同一个页面。

为了使菜单变成响应式，需要为目标浏览器窗口尺寸创建一个媒介查询。如果浏览器窗口小于800px，CSS将只显示拥有small-menu类的div元素中的select表单。对于所有较大的浏览器窗口，CSS将显示拥有large-menu类的div元素中的ul列表。当浏览器窗口跨越801px这样的临界宽度值时，页面上会呈现一个菜单切换的效果。

对于更大的屏幕尺寸，可以使用相同的ul列表，甚至可以使用相同的HTML，但是通过媒介查询来应用新的CSS从而交付一个完全不同的菜单。

对于中等尺寸的菜单，使用CSS来显示列表项为水平列表，如下面的代码段所示。

由此得到了一个水平的菜单列表。我们希望这个导航版本出现在中等尺寸的浏览器窗口中。将其放置在范围为801～1024px的媒介查询中，如下面的代码段所示。

为了尽可能好地运用响应式导航元素，我们想要在屏幕宽度变化时，菜单列表版本能够移动到一个不同的布局位置。对于中等尺寸宽度，即801～1024px，菜单停留在页面顶部并保持100%宽度。当屏幕宽度大于1025px时，菜单将浮动到父元素的左边。

在801～1024px的媒介查询中，为large-menu类添加一个100%宽度，对于1025px的媒介查询，为large-menu类添加一个20%宽度及float:left值。

为了填满这个页面，也将添加一个包装在div元素中的文本段落。可以再次使用Lorem Ipsum文本生成器来创建填充文本（http://lipsum.com/）。在中等宽度媒介查询中设置包含该文本段落的元素宽度为100%。在最大的媒介查询中，设置包含该文本段落的元素宽度为80%，将将其浮动到父元素的右边。

样式应该与以下代码段一样。

最终结果是一个拥有三个不同版本导航菜单的页面。当发现对于每个特定的浏览器窗口尺寸都有菜单的一个优化版本时，你的观众将会感到惊讶。你可以在以下截图中看到这些神奇的导航元素。

 

工作原理

每个导航版本应用了CSS3的媒介查询属性来最大限度地提高菜单和内容的可用空间。在最小的窗口中（即小于801px），导航整齐地排列在select表单元素中。在中等尺寸的窗口中（介于801～1024px），导航是内联的并且横跨页面顶部，内容紧跟着导航。最后，对于最宽的浏览器窗口，导航浮动到了左边并且只占横屏宽度的20%，而内容在宽屏浏览器窗口剩余的80%（右边）中保持最大化。需要更多的计划和努力才能实现该技术，但是值得用它为你的用户提供尽可能最佳的视角。