【HTML、CSS、Jquery】ナビゲーションメニューの作り方2

こんにちは。今回はナビゲーションの作り方2ということで、スマホやパソコンなど、各サイズによるデザインをしていこうと思います。ちなみにこれをレスポンシブデザインといいます。

まだ前回の記事を見ていない方はこちらをご覧ください。

【HTML、CSS、Jquery】ナビゲーションメニューの作り方

HTML、CSS】ナビゲーションメニューの作り方2

それではやっていきます。

もっとも簡単な方法はindex.htmlをそっくり次のように入れ替えること。

ドロワーメニュー

<!DOCTYPE html>
<html>
<head>
<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css">
<link rel="stylesheet" href="style.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>

</head>
<body class="drawer drawer--right">
  <header role="banner">
    <!-- ハンバーガーボタン -->
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <!-- ナビゲーションの中身 -->
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">ナビ1</a></li>
        <li><a class="drawer-menu-item" href="#">ナビ2</a></li>
        <li><a class="drawer-menu-item" href="#">ナビ3</a></li>
        <li><a class="drawer-menu-item" href="#">ナビ4</a></li>

      </ul>
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
  
  <!-- ドロワーメニューの利用宣言 -->
  <script>
    $(document).ready(function() {
    $('.drawer').drawer();
  });
  </script>
</body>

</html>

この方法はかなり多く使われています。

あとは、「Brand」と「ナビ」というところを自分の好きなメニューに変えてくれればOKです。

ぶっちゃけ最初はよくわからないという人も多いと思いますので、これを入れとけばOKです!

少しだけ解説すると、Jqueryというプログラミング言語を使ってまとめちゃうことができます。

詳しく知りたい方は「Drawer.js」で調べてみてください。

とまあ、これだけだと寂しいので、違う方法も載せておきます。

純粋にコードを書いて作ったものです。

HTML&Jquery

<!doctype html>
<html lang="ja">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="style.css">
    <title>ナビゲーションメニューの作り方</title>


  </head>


  <body>

<div class="nav-toggle"><span></span></div>
<nav class="menu-container">
  <ul class="menu">
    <li class="menu-item"><a href="#">ホーム</a></li>
    <li class="menu-item"><a href="#">ページ A</a></li>
    <li class="menu-item"><a href="#">ページ B</a></li>
    <li class="menu-item"><a href="#">ページ C</a></li>
    <li class="menu-item"><a href="#">ページ D</a></li>
    <li class="menu-item"><a href="#">ページ E</a></li>
  </ul>
</nav>




<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
  jQuery('.nav-toggle').on('click', function() {
  if(jQuery('.menu-container .menu').css('display') === 'block') {
    jQuery('.menu-container .menu').slideUp('1500');
  }else {
    jQuery('.menu-container .menu').slideDown('1500');
  }
});
  </script>


    </body>
</html>

CSS

.menu-container {
  margin: 0;
  position: relative;
}

.menu-container .menu {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu .menu-item {
  flex: 1;
}

.menu-container .menu .menu-item a {
  background: #fff;
  color: #333;
  display: block;
  padding: 0.6em 0.4em;
  text-align: center;
  text-decoration: none;
}

.menu-container .menu .menu-item a:hover {
  background: #4ab866;
  color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: none;
}

@media screen and (max-width: 768px) {

  .menu-container .menu {
    display: none;
    position: absolute;
    width: 100%;
  }
  .menu-container .menu .menu-item a {
    border-bottom: 1px solid #ccc;
    border-right: none;
  }
  .menu-container .menu .menu-item:last-child a {
    border-bottom: none;
  }
  .nav-toggle {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 16%;
  margin: -8% 0 0 -42%;
  background:  #4ab866; 
}
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin: -8% 0 0 -50%;
  background:  #4ab866;
}
.nav-toggle span::before {
  margin-top: -38%;
}
.nav-toggle span::after {
  margin-top: 19%;
}

}

コピペして使ってください。

本日はこれで終わり。

SNSでもご購読できます。

富永一力のおすすめFX口座はこちら