其中一个最棘手的部分网站上进行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>
正如您在上面看到的,我们有六个主菜单链接,并在其后添加了一个链接。 隐藏在小屏幕中时,此额外链接将用于拉