如何构建下拉滑动式响应导航菜单

标签： 导航 菜单 | 发表时间：2013-08-27 22:45 | 作者：jjfat
出处：http://blog.csdn.net

日期：2013-8-27  来源： GBin1.com

如何构建下拉滑动式响应导航菜单

在线演示     在线下载

经过长时间研究移动响应布局，我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面，而且这一点是最基本的，无论是在完整的显示器或较小的移动响应屏幕。

在本教程中，我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单。链接出现在前端，但下降为一个隐藏的菜单，调整后的大小低于600px。同时将出现一个小的下拉菜单，图标会切换打开和关闭命令。

演示及下载源代码

设定文件

顶部区域包含文件的一小部分，我们用来创建效果。我从由谷歌托管的最新 jQuery库中复制了常规样式表，所有自定义JS函数被存储在外部文件命名为menu.js。

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Responsive Sliding Navigation Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Boogaloo">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" charset="utf-8" src="menu.js"></script>
</head>

大部分页面标记不是很重要，除了标题区域。我试图把一切都设定为固定的高度，但header不能用固定CSS属性，否则控制打开和关闭时页面将不会扩展滑动菜单。所以标题和导航链接在CSS中用line-height设置。 

<header id="topnav">
  <nav>
    <ul>
  <li><a href="#" class="sel">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Get in Touch</a></li>
   </ul>
  </nav>
  <a href="#" id="navbtn">Nav Menu</a>        
  <h1><a href="#">Designee</a></h1>
</header><!-- @end #topnav -->

页h1标题最适合最后一个元素，所以header将始终保持恒定高度。标题旁边有一个锚链接 ID #navbtn，包含了滑动菜单链接图标。当宽度低于一定阈值，这个CSS链接才会显示。

在CSS标记位置

通常情况下我不会用到jQuery。切换菜单的唯一问题是，我们无法在CSS中达到效果。jQuery的方法将适用于内联CSS样式，并覆盖默认样式。所以解决方案是使用CSS定位元素，并恰当使用JavaScript完成动画效果。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }.....

via 极客标签

来源： 如何构建下拉滑动式响应导航菜单

作者：jjfat 发表于2013-8-27 22:45:37 原文链接
阅读：78 评论：0 查看评论

相关 [导航 菜单] 推荐：

CSS导航栏/菜单教程

- Costi - 紫萝卜 | 所有与设计有关
导航栏/菜单在一个网站上的作用是非常重要的，我们的访客需要的是可以快速的找到他们所需要的内容的高效导航栏/菜单，而不是一直在网站内打转. 下面与大家分享30个国外优秀的CSS导航栏/菜单教程，将教大家如何从代码和结构上构建一个高效简洁的导航栏/菜单. CSS与jQuery下拉菜单解决方案. CSS优化需要注意的15个细节.

25个漂亮的导航菜单设计

- 1625 - 前端观察
原文：25个漂亮的导航菜单设计. 译自：25 Beautiful Navigation Menus. 请尊重版权，转载请注明出处，多谢. 导航菜单是网页设计中最关键的一部分，因为它们对于网站的可用性和用户体验至关重要. 导航结构比较烂或者在导航中有明显不足的网站可能会困扰用户并最终导致用户找不到想要的页面和内容而离开.

10个精致的导航菜单欣赏及点评

- 牛腩羊耳朵 - 互联网的那点事
这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美. 这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法. 这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平. 不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗.

10个精致的导航菜单欣赏与点评

- jipeng.sun - 可咔酷
这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美. 这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法. 这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平. 不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗.

20个很酷的CSS3导航菜单制作教程

- Ashaum - 博客园-首页原创精华区
　　CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果. 以前很多需要编写 JavaScript 才能实现的效果，如今只需要简单的写几句 CSS3 代码就能实现. 今天这篇文章就向大家推荐20个很酷的CSS3导航菜单制作教程，展示一下 CSS3 的魅力.

30个优秀的网站导航菜单设计案例

- Ashaum - 博客园-首页原创精华区
　　导航是网站最重要的组成部分之一，一个有吸引力的导航能够引导用户浏览网站中的更多内容. 导航需要和网页内容完美的融合在一起，因此设计前需要设仔细分析网页结构. 这篇文章收集了30个优秀的网站导航设计案例，希望这些实例能给你带来灵感. 分享35个非常漂亮的单页网站设计案例. 寻找网页设计灵感的27个最佳网站推荐.

10个精致的导航菜单欣赏及点评

- suchasplus - 飞鱼的声纳
这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美. 这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法. 这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平. 不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗.

[转]10个精致的导航菜单欣赏及点评

- - 畅之部落格
这些导航菜单来自于 Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美. 这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法. 这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平. 不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗.

绚丽而又实用的jQuery和CSS3导航菜单

- - CSDN博客推荐文章
我们说导航菜单是网站的一扇门，然而精美便捷的导航更是能让用户方便地游走在网站的各个角落，更重要的是，能让用户牢牢地记住这扇大门，记住这个网站. 所以很多网站设计师对网站导航的设计非常重视. 下面我就向大家分享几款个人觉得非常不错的jQuery和CSS3导航，每一款都挺实用的，而且都是开源的，提供下载源码.