来源：http://www.hengtaiboyuan.com 作者：恒泰博远 时间：2014-07-29
其中一个创造性的方式在网站上显示的导航是一个平铺的风格。不只是它将使一个时髦的扁平化设计的菜单也将增值到您的网站，当你使用CSS3媒体查询使它响应。
在本教程中，我们将使用CSS3和jQuery创建一个平铺响应瓷砖菜单。我们将针对3视口的位置：1024px，768PX和480PX。
没有任何闲话少说，让我们开始吧。
创建菜单技术需求分析：
1、jQuery库
2、字体真棒图标
3、关于CSS3和jQuery的基础知识
4、时间和耐心
入门
在我们前进的标记，我们需要添加下面的下面的代码到我们的头上部分。这将包括一些meta标签，链接到我们的CSS，jQuery和字体。
标记
对于我们的响应瓷砖菜单中，我们将简单地包括内部包裹一个导航标签中的无序列表的链接。使用Unicode☰，我们将有一个切换按钮，将显示在小屏幕上我们的耕种菜单。
我们也将使用该字体真棒类每个项目菜单中添加字体真棒图标。请参阅本页面，如果你想使用一些其他的图标。
看看下面的HTML。
CSS部分
现在，让我们把枯燥的标记弄成热闹。要开始了，我们会把我们的整体风格先为我们的链接和身体的背景。
现在，让我们为我们的导航容器和容器类的一些宽度设置。我们将设定宽度的百分比测定为95％。然后给它的1000px的最大宽度。最后，集中在屏幕上。
接下来，我们将样式剩余的标签。这将包括我们的风格我们的标志，导航杆类，链接以及其他的ID和类。
请注意，我使用了新的CSS3属性过渡。这将简单地以同样的速度增加在0.3秒的持续时间在鼠标悬停状态的平稳过渡动画和过渡效果，从开始到结束。
现在，让我们添加独特的颜色为每个菜单项。
媒体查询
现在，让我们的导航响应，让我们添加一些媒体查询为目标的768PX和480PX视口。
我们将给予50％的宽度为768PX上视每个项目。这将形成我们的菜单上耕种导航。请注意，在480PX视口，我们成立了一个类导航打开。这将使一个高度我们的菜单列表菜单列表图标被点击时。我们也给我们的导航列表中100％的宽度，以确保他们会崩溃对方开始在480PX。
脚本
我们可以完成我们耕种响应菜单，我们将在下面的标签结束前加入我们的jQuery。这个jQuery代码将只需选择菜单列表，并添加类资产净值开放给它的汽车的高度，然后滑下了300毫秒时间来显示导航。
结束语
恭喜！你刚刚创建与现代平面设计一个好看的响应式菜单。
请随意制作你想添加就可以了不同的动画技术和设计。
希望您能从本教程中了解到，让你进步。
本文链接：http://www.hengtaiboyuan.com/jsdt/content_324 转载请注明来自北京恒泰博远科技有限公司
您的位置 :