レスポンシブ（モバイルファーストアプローチ）用のJavaScriptドロップダウンメニュー/水平メニュー

Question

私は、単一のページレイアウトとモバイルの最初のアプローチでレスポンシブなウェブサイトを構築しています。まあ、少なくとも私は試みているが、メニューは最初から苦労している。

完成した結果をどのようにして調整したかのようなメニュースニペットを検索しましたが、これまでのところ失敗しただけです。私は非常に多くの異なるコードを試しましたが、これは私が現在持っているものです。なぜこれがうまくいかないのか理解できますが、それ以上のアイデアはありません。私は本当に助けが必要です。クリックされたとき

• ドロップダウン "点滅" は/直接スライドアップ：それは今（時々）はどのような

  $(function() { 
   
       var handleMatchMedia = function(md) { 
   
        if (md.matches) { 
   
        // window width is at least 840px 
   
         $(".nav-toggle").click(function() { 
   
         $(this).next("div").slideToggle(250); 
   
         }); 
   
        } else { 
   
        // window width is less than 840px 
   
         $(".nav-toggle").click(function() { 
   
         $(this).parent().siblings().children().next().slideUp(250); 
   
         $(this).next("div").delay(360).slideToggle(250); 
   
         }); 
   
        } 
   
       }; 
   
       var mq = window.matchMedia("(min-width: 840px)"); 
   
  
   
       handleMatchMedia(mq); 
   
       mq.addListener(handleMatchMedia); 
   
       });

  header { 
   
      background-color: #171717; 
   
      top: 0; 
   
      position: fixed; 
   
      width: 100%; 
   
      color: #ffffff; 
   
      text-transform: uppercase; 
   
      list-style-type: none; 
   
      letter-spacing: 1px; 
   
      z-index: 2; } 
   
      header a { 
   
      text-decoration: none; 
   
      color: #9e9ea1; } 
   
      header a:hover { 
   
      border-bottom: 2px solid #ffffff; 
   
      color: #ffffff; 
   
      padding-bottom: calc(1.5rem/6); 
   
      padding-bottom: 0.25rem; } 
   
      header ::-moz-selection { 
   
      background-color: #ffffff; 
   
      color: #171717; } 
   
      header ::selection { 
   
      background-color: #ffffff; 
   
      color: #171717; } 
   
  
   
  #nav-container { 
   
      margin: 0 auto; 
   
      max-width: calc((1.5rem*2*12) + (1.5rem*11)); 
   
      padding: calc(1.5rem/2) 1.5rem; 
   
      height: calc(1.5rem*2); } 
   
  
   
  .navigation .nav-toggle span { 
   
      cursor: pointer; } 
   
  
   
  .navigation .nav-list { 
   
      display: none; } 
   
      .navigation .nav-list ul { 
   
      text-align: center; 
   
      padding: calc(1.5rem/2) 0 1.5rem; 
   
      top: calc(1.5rem*2); 
   
      left: 0; 
   
      right: 0; 
   
      margin: 0 auto; 
   
      position: absolute; 
   
      background-color: #171717; } 
   
      .navigation .nav-list ul li { 
   
       padding: calc(1.5rem/2) 0; 
   
       display: block; } 
   
  
   
  .navigation .nav-main { 
   
      width: 66.66667%; 
   
      float: left; } 
   
  
   
  @media all and (min-width: 940px) { 
   
      .nav-main .nav-toggle { 
   
      display: none; } 
   
      .nav-main .nav-list { 
   
      display: block; } 
   
      .nav-main .nav-list ul { 
   
       position: static; 
   
       padding: 0; } 
   
       .nav-main .nav-list ul li { 
   
       display: inline-block; 
   
       padding: 0 calc(1.5rem/2); } 
   
       .nav-main .nav-list ul li:first-child { 
   
        padding-left: 0; } 
   
       .nav-main .nav-list ul li:last-child { 
   
        padding-right: 0; } 
   
      .nav-main .active { 
   
      border-bottom: 2px solid #ffffff; 
   
      color: #ffffff; 
   
      padding-bottom: calc(1.5rem/6); 
   
      padding-bottom: 0.25rem; } }

  <header> 
   
      <div id="nav-container"> 
   
      <div class="brand"> 
   
       <a href="#"><span><span>B</span>rand</span> Name</a> 
   
      </div> 
   
      <div class="navigation"> 
   
       <nav class="nav-main left"> 
   
       <div class="nav-toggle text-center"> 
   
        <span>Menu</span> 
   
       </div> 
   
       <div class="nav-list"> 
   
        <ul> 
   
        <li> 
   
         <a class="active" href="#home">Home</a> 
   
        </li> 
   
        <li> 
   
         <a href="#bio">Bio</a> 
   
        </li> 
   
        <li> 
   
         <a href="#portfolio">Portfolio</a> 
   
        </li> 
   
        <li> 
   
         <a href="#contact">Contact</a> 
   
        </li> 
   
        </ul> 
   
       </div> 
   
       </nav> 
   
      </div> 
   
      </div> 
   
  </header>

  。

• メニュー項目が常に大きな画面に表示されるとは限りません。
私はそれを行うことを望む何

：

• は標準しかし 大きな画面上の水平方向のメニューへの変更など（閉鎖）ドロップダウンう。
• ユーザーが 'a'ジャンプリンク、メニュー の外側、または「メニューボタン」の上をクリックすると、ドロップダウンが閉じます。

私はJavaScriptに新たなんだ、そう正確にどのようにして場所を記入してください（及び好ましくはまた、なぜ、私は:)学びたい）事前に

ありがとう！

EDIT 1
が< HREFを変更= "＃バイオ" ターゲット= "ブランク">バイオ</A>から<のhref = "＃バイオ">バイオ</A>