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

电玩女神 2023-07-17 06:59 8阅读 0赞

来源：[GBin1.com][]

[![如何构建下拉滑动式响应导航菜单][title.jpg]][title.jpg 1]

[ 在线演示][Link 1]   [ 在线下载][Link 2]

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

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

[演示及下载源代码][Link 3]

## 设定文件 ##

顶部区域包含文件的一小部分，我们用来创建效果。我从由谷歌托管的最新[jQuery库][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>

页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%; }
    body { 
      background: #f8f8f8 url('images/bg.png'); /* BG Neutral http://subtlepatterns.com/ps-neutral/ */
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 62.5%; 
      line-height: 1; 
      color: #343434;
      padding-bottom: 55px;
    }
     
    ::selection { background: #b9e9b9; color: #555; }
    ::-moz-selection { background: #b9e9b9; color: #555; }
    ::-webkit-selection { background: #b9e9b9; color: #555; }
     
    a { color: #6992c0; }
    a:hover { color: #77a4dc; }
     
    h2 { font-size: 2.9em; line-height: 1.4em; color: #626262; margin-bottom: 22px; }
     
    p { font-size: 1.6em; line-height: 1.7em; color: #777; margin-bottom: 15px; }
     
    #w {
      display: block;
      max-width: 900px;
      min-width: 300px;
      margin: 0 auto;
    }
     
    #content {
      margin: 0 1em;
      background: #fff;
      padding: 0 10px;
    }
     
    #pagebody {
      padding: 15px 25px;
    }

我的默认CSS浏览器重置包括一组自定义代码的页面排版，而且body背景标题是脱离于Subtle模式中立的PS。我不得不把包装 容器和主题容器拆分成2个div，因为要保证页面左右两侧填充，不让页面宽度变为100%。在margin: 0 auto;属性上添加margin值，则会导致失去正中定位。

/* navigation bar */
    #topnav {
      display: block;
      width: 100%;
      position: relative;
    }
     
    #topnav #navbtn {
      display: none;
      float: right;
      top: 0;
      width: 20px;
      height: 70px;
      background: url('images/menu.png') center no-repeat;
      text-indent: -99999px;
      overflow: hidden;
    }
     
    #topnav nav {
      position: absolute;
      top: 0; 
      right: -10px;
    }
     
    #topnav nav ul {
      list-style: none;
    }
    #topnav nav ul li {
      display: block;
      float: left;
      font-size: 1.4em;
      margin-right: 4px;
    }
     
    #topnav nav ul li a {
      display: block;
      text-decoration: none;
      line-height: 70px;
      color: #8ea188;
      font-weight: bold;
      padding: 0 10px;
      border-bottom: 2px solid #fff;
     
    }
    #topnav nav ul li a:hover {
      color: #6f8767;
      background: #ddecd9;
      border-bottom-color: #bdd8b5;
    }

通过编辑内部<nav>元素，可以保留对标题栏的控制。通过设置绝对位置我们可以控制导航链接离标题的距离。注意\#navbtn是如何保持隐藏的，直到调整大小低于560px，才会显示。除此之外还需设定高度、宽度和定位。

## 可响应样式 ##

如果浏览器窗口小于560px，我只需做一点小小的改动。560并不是多么神奇的数字，而是默认导航区与logo文本之间恰好比较适合的距离。也是隐藏导航菜单和切换显示图标的临界值。

/* responsive styles */
    @media screen and (max-width: 560px) {
      h2 { font-size: 2.2em; }
      p { font-size: 1.45em; line-height: 1.55em; }
      #topnav { height: auto; }
      #topnav nav { 
        display: none; 
        position: static;
        width: 100%;
        top: auto;
        right: auto;
      }
      #topnav nav ul li { float: none; margin: 0; }
      #topnav nav ul li a {
        display: block;
        width: 100%;
        line-height: 1.4em;
        border: 0;
        padding: 6px 9px;
        background: #dcf4dc;
      }
      #topnav nav ul li a:hover {
        background: #cbdcc5;
      }
      #topnav nav ul li a.sel {
        color: #6f8767;
        background: #cbdcc5;
      }
       
      #topnav #navbtn {
        display: block;
      }
    }

这也意味着从导航元素除去绝对定位，这样使它呈现为一个静态块。点击屏幕时，导航锚链接会以100%的宽度行呈现以达到最快访问。此外，内部页面headers+paragraphs将被调小，匹配上合适的行高值。

## JavaScript互动 ##

menu.js代码最后一点也可以直接包含到HTML文档中。但是由于我们需要处理不只一个切换方法，把标记从动态效果分离出来比较清爽而且高效率。我会把文件分成几段，以便阅读。

$(function(){
      var nb = $('#navbtn');
      var n = $('#topnav nav');
       
      $(window).on('resize', function(){
         
     
        if(nb.is(':hidden') && n.is(':hidden') && $(window).width() > 569) {
          // if the navigation menu and nav button are both hidden,
          // then the responsive nav is closed and the nav menu is still hidden.
          // just display the nav menu which will auto-hide at <560px width and remove class.
          $('#topnav nav').show().addClass('keep-nav-closed');
        }
      });

第一大块可以说是最令人困惑的。需要处理微小的错误，来调整浏览器响应与不响应的问题，而不能影响到智能手机。我们把一个事件关联到窗口检查[.on() resize][.on_ resize]。两个不同逻辑语句核对变量目标header nav元件，与之相随的是导航菜单切换链路。

当浏览器可响应状态，用户切换菜单开/关时，将附加内联样式属性。这将超过任何写在样式表中的优先级，而且当菜单打开或者关闭之后也会是个问题。nav有一个永久的显示display: none;甚至当大小被调整到大于560px。

这就是第二个if\{\}语句检查的目的。当导航和菜单按钮都隐藏，布局响应，用户打开/关闭菜单，然后调整大小恢复到常规视图。所以我们只需要再次显示导航。但有一个问题，[jQuery中show()][jQuery_show]方法也将被附加风格内嵌，意味着调整大小时响应的导航菜单保持永久开放。为了解决这个问题，我添加了一个类.keep-nav-closed.如果关闭导航后调整更大，类就会得到补充。如果保持开放，响应时则一直开放直到调整更大然后再次回落。

if($(this).width() < 570 && n.hasClass('keep-nav-closed')) {
      // if the nav menu and nav button are both visible,
      // then the responsive nav transitioned from open to non-responsive, then back again.
      // re-hide the nav menu and remove the hidden class
      $('#topnav nav').hide().removeAttr('class');
    }

另外一个if\{\}语句应该有意义，这就是为什么我们要检查这个类。只出现在第二次调整之后，导航打开，然后我们知道当调整回到响应阈 值内它会保持关闭。这是一个奇怪的错误，除了完全移除属性（仍然会导致问题）以外，我还没有找到较微小或更快的解决方案，用于处理内嵌jQuery风格。 所以现在让我们继续来看最后一段JavaScript代码。

$('#topnav nav a,#topnav h1 a,#btmnav nav a').on('click', function(e){
      e.preventDefault(); // stop all hash(#) anchor links from loading
    });
     
    $('#navbtn').on('click', function(e){
      e.preventDefault();
      $("#topnav nav").slideToggle(350);
    });

两个事件处理程序检查点击事件针对不同的目标。首先是锁定到所有不同的锚链接标题导航和页脚节。href值是hash symbols (\#)我将它们设置为不加载任何东西。与之类似的是点击导航切换，因为我们不希望加载hash到页面URL。响应隐藏导航菜单将在350毫秒内切换打开和 关闭，完全无视href值。

[![如何构建下拉滑动式响应导航菜单][title.jpg]][title.jpg 1]

via [ 极客标签][Link 2]

来源：[如何构建下拉滑动式响应导航菜单][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/css/20130827-responsive-slidedown-nav/
[title.jpg]: http://www.gbin1.com/technology/css/20130827-responsive-slidedown-nav/title.jpg
[title.jpg 1]: http://www.gbin1.com/technology/css/20130827-responsive-slidedown-nav/index.html
[Link 1]: http://www.gbtags.com/gb/demoviewer/1778/0cbc4f88-12f6-4a8c-938f-d89ee1a03795/responsive-nav-menu%7Cindex.html.htm
[Link 2]: http://www.gbtags.com/gb/share/1778.htm
[Link 3]: http://designshack.net/tutorialexamples/responsive-nav-menu/responsive-nav-menu.zip
[jQuery]: http://www.gbtags.com/gb/editpost.htm?postid=1778#ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
[.on_ resize]: http://api.jquery.com/on/
[jQuery_show]: http://api.jquery.com/show/