jQueryでスマホ用の上からぬるっと出てくるメニューの作り方

2018 9/17

2018.09.17

ヘッダー部分にどのページを開いても表示されるメニューがあるサイトは多いと思います。

僕のサンプル用のページもあるのですが、スマホで表示すると変に改行されてしまいます。

PCで表示時がこちらです。

これをスマホで開くとこうなります。

これではださいですね(笑)

と言ってもデザインセンスは全然ないので、技術的に上からにゅるっと出てくるメニューの作り方に絞って解説します。

スマホ用の上からぬるっと出てくるメニューのコード

実際に作成したサンプルコードはこちらです。

スマホで開くか、デベロッパーツールを使って表示してください。

[btn class=”simple”]スマホ用の上からぬるっと出てくるメニュー[/btn]

HTML

<header>
  <div id="logo">
    <a href="https://swell.dev-lib.work">
      <img src="https://swell.dev-lib.work/wp-content/uploads/2018/05/logo2.png" alt="フリーエンジニアライフ">
    </a>
  </div>
  <div id="headimg">
    <img src="https://swell.dev-lib.work/wp-content/uploads/2018/06/uyuni3.png">
  </div>
  <img src="https://swell.dev-lib.work/sample/images/menu.png" id="spmenu" class="pcnone" />
</header>
<nav id="headernav">
  <ul class="gmenu clearfix">
    <li>
      <a href="https://swell.dev-lib.work">メニューA</a>
      <ul>
        <li><a href="https://swell.dev-lib.work">メニューA-1</a></li>
        <li><a href="https://swell.dev-lib.work">メニューA-2</a></li>
        <li><a href="https://swell.dev-lib.work">メニューA-3</a></li>
        <li><a href="https://swell.dev-lib.work">メニューA-4</a></li>
      </ul>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューB</a>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューC</a>
      <ul>
        <li><a href="https://swell.dev-lib.work">メニューC-1</a></li>
        <li><a href="https://swell.dev-lib.work">メニューC-2</a></li>
        <li><a href="https://swell.dev-lib.work">メニューC-3</a></li>
        <li><a href="https://swell.dev-lib.work">メニューC-4</a></li>
      </ul>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューD</a>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューE</a>
    </li>
  </ul>
  <div id="menuclose" class="pcnone">閉じる</div>
</nav><header>
  <div id="logo">
    <a href="https://swell.dev-lib.work">
      <img src="https://swell.dev-lib.work/wp-content/uploads/2018/05/logo2.png" alt="フリーエンジニアライフ">
    </a>
  </div>
  <div id="headimg">
    <img src="https://swell.dev-lib.work/wp-content/uploads/2018/06/uyuni3.png">
  </div>
  <img src="https://swell.dev-lib.work/sample/images/menu.png" id="spmenu" class="pcnone" />
</header>
<nav id="headernav">
  <ul class="gmenu clearfix">
    <li>
      <a href="https://swell.dev-lib.work">メニューA</a>
      <ul>
        <li><a href="https://swell.dev-lib.work">メニューA-1</a></li>
        <li><a href="https://swell.dev-lib.work">メニューA-2</a></li>
        <li><a href="https://swell.dev-lib.work">メニューA-3</a></li>
        <li><a href="https://swell.dev-lib.work">メニューA-4</a></li>
      </ul>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューB</a>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューC</a>
      <ul>
        <li><a href="https://swell.dev-lib.work">メニューC-1</a></li>
        <li><a href="https://swell.dev-lib.work">メニューC-2</a></li>
        <li><a href="https://swell.dev-lib.work">メニューC-3</a></li>
        <li><a href="https://swell.dev-lib.work">メニューC-4</a></li>
      </ul>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューD</a>
    </li>
    <li>
      <a href="https://swell.dev-lib.work">メニューE</a>
    </li>
  </ul>
  <div id="menuclose" class="pcnone">閉じる</div>
</nav>

グローバルメニューを構築する部分とそれに関連する部分の抜粋です。

CSS

.pcnone {
  display: none;
}

@media screen and (max-width: 979px) {
  #footerrnav {
    display: none;
  }
  #headernav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  #headernav ul.gmenu {
    display: block;
  }
  #headernav ul.gmenu > li {
    width: 100%;
    
  }
  ul.gmenu > li ul {
    display: block;
    background-color: #2f2f2f;
    width: 100%;
    padding: 0;
  }
  #menuclose {
    text-align: center;
    background: #000000;
    color: #FFFFFF;
    padding: 2% 0;
    cursor: pointer;
  }
  #spmenu {
    display: block;
    width: 12%;
    position: absolute;
    top: 0;
    right: 2%;
  }
  .pcnone {
    display: block;
  }
}

PC表示時はあまり変わらないので、主にタブレットやスマホ表示用に追加しています。

jQuery

$(function(){
  $("#spmenu").click(function() {
    $("#headernav").slideDown(300);
  });
  $("#menuclose").click(function() {
    $("#headernav").slideUp(300);
  });
});