vue 创建响应式的导航栏_如何为您的网站创建响应式导航

其中一个最棘手的部分网站上进行responsified 是“导航”，这部分是针对网站的无障碍真的很重要，因为这是观众跳过网页的方式之一。

实际上，有很多方法可以创建响应式网站导航，甚至有些jQuery插件也可以在第二秒内完成 。

然而，而不是应用即时的解决方案，在这篇文章中，我们将引导您如何建立从地上一个简单的导航和使用CSS3媒体查询和一个小的jQuery在一个小屏幕尺寸一样，以显示它的智能手机正常。

因此，让我们开始吧。

• 演示版
• 下载源

HTML

首先，让我们在head标签内添加meta视口 。 我们的页面需要此meta视口标签，才能在任何屏幕尺寸内正确缩放，尤其是在移动视口中。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

…，然后在body标签内添加以下代码段作为导航标记。

<nav class="clearfix">
	<ul class="clearfix">
		<li><a href="#">Home</a></li>
		<li><a href="#">How-to</a></li>
		<li><a href="#">Icons</a></li>
		<li><a href="#">Design</a></li>
		<li><a href="#">Web 2.0</a></li>
		<li><a href="#">Tools</a></li>	
	</ul>
	<a href="#" id="pull">Menu</a>
</nav>

正如您在上面看到的，我们有六个主菜单链接，并在其后添加了一个链接。 隐藏在小屏幕中时，此额外链接将用于拉