WEBCRE8TOR.COM中国短期大学情報ビジネス学科 メディア科目ブログ
[コーディングの実践:NORMAL] 02 JavaScriptでドロワーメニュー実装編
実践編

[コーディングの実践:NORMAL] 02 JavaScriptでドロワーメニュー実装編

2023年12月06日 ／最終更新：2024年11月16日

少し発展的なコーディング練習02 JavaScriptでドロワーメニュー実装編

[コーディングの実践:NORMAL] 02 JavaScriptでドロワーメニュー実装編

headタグのhtmlコーディング

編集画面を「index.html」のタブに切り替えましょう。
また、「html02」フォルダの中の「index.html」を今使用しているブラウザの別タブにドロップして開いておきましょう。

titleタグのhtmlコーディング

まずは今回コーディングするhtmlファイルの名称を変更します。
名称はtitleタグに打ち込むことでブラウザのタブに表示されます。

文字列を変更する

まずは前回と同じようにtitleタグの文字列変更を行いましょう。
ハイライトされている7行目のtitleタグ内の文字を、以下の工程で書き換えておきましょう。

  1. 「LEVEL EASY」を「LEVEL NORMAL」に変更する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/reset.css">
<title>LEVEL NORMAL</title>
</head>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
ブラウザのタブの文字が「LEVEL NORMAL」に変わっていたら成功です。

外部ファイルを読み込むhtmlコーディング

ではハンバーガーメニューをタップして開閉するドロワーメニューの動きを実装するため、
以下のページを参考に、外部のCSSファイルやJavaScriptファイルを読み込んでおきましょう。

参考URL:Drawer – Flexible drawer menu using jQuery, iScroll and CSS. (blivesta.com)

  1. <link rel=”stylesheet” href=”css/reset.css”>(5行目)の記述の下を改行する
  2. ハイライトされている7～10行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<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.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<title>LEVEL NORMAL</title>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
この時点では外部からファイルを読み込んで使用するための準備を行っただけですので、特に変化はありませんね。

bodyタグのhtmlコーディング

bodyタグへclassを追加するhtmlコーディング

headタグへの記述によって読み込むファイルの準備はできましたが、このJavaScriptファイルはbodyタグへのclassの追加指定が必要です。そこでbodyタグに発動のためのclass指定を行っておきましょう。

  1. ハイライトされている13行目のように<body>タグの内容を書き換える。

index.html

<!-- 上部省略 -->
<title>LEVEL NORMAL</title>
</head>
<body class="drawer drawer--right">
<header>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
この時点でも特に変化はありませんが、JavaScriptは「どこ」に「何」を「どれくらい」で発動すればよいかの指定が必ず必要です。

buttonタグとnavタグを追加するhtmlコーディング

今度はハンバーガーメニューのbuttonタグ、そして開閉するドロワーメニューのnavタグを新たに追加しましょう。
注意点として、この2点はfooterタグの終了タグとbodyタグの終了タグの間に追記します。
追記場所を間違えないようにしましょう。

  1. footerタグの終了タグ(62行目)とbodyタグの終了タグ(63行目)の間に1行開ける。
  2. ハイライトされている63～72行目の内容を記述する。

index.html

<!-- 上部省略 -->
<footer>
  <div class="wrapper">
    <p>© Chugoku Gakuen.</p>
  <!-- / .wrapper --></div>
</footer>
<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-menu-item" href="#">TOP</a></li>
    <li><a class="drawer-menu-item" href="#">PROFILE</a></li>
  </ul>
</nav>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
右上にハンバーガーメニューが現れましたか?クリックしてもドロワーメニューは動作しませんね。
実はもう動作自体は準備してあるんですが、発動命令を出してあげなければ動きません。

scriptタグを追加するhtmlコーディング

今度はクリックするハンバーガーメニューも開閉するドロワーメニューも準備は整いました。
あとは「発動命令」をだすだけです。先ほど追加した下に発動命令を追記しましょう。

  1. 先ほど追記したnavタグの終了タグ(72行目)とbodyタグの終了タグ(73行目)の間に1行開ける。
  2. ハイライトされている73～77行目の内容を記述する。

index.html

<!-- 上部省略 -->
<nav class="drawer-nav" role="navigation">
  <ul class="drawer-menu">
    <li><a class="drawer-menu-item" href="#">TOP</a></li>
    <li><a class="drawer-menu-item" href="#">PROFILE</a></li>
  </ul>
</nav>
<script>
  $(document).ready(function () {
    $('.drawer').drawer();
  });
</script>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
ハンバーガーメニューをクリックしてドロワーメニュー開閉は動作しましたか?

headerタグのhtml・cssコーディング

h1タグのhtmlコーディング

titleタグの文字列は「LEVEL NORMAL」に変更しましたが、headerタグの中のh1タグはまだ「LEVEL EASY」のままでしたよね。こちらを書き換えましょう。

  1. ハイライトされている16行目のようにh1タグの内容を書き換える。

index.html

<!-- 上部省略 -->
<title>LEVEL NORMAL</title>
</head>
<body class="drawer drawer--right">
<header>
  <div class="wrapper">
    <h1 class="logo">LEVEL NORMAL</h1>
    <nav>
      <ul>
        <li><a href="#">TOP</a></li>
        <li><a href="#">PROFILE</a></li>
      </ul>
    </nav>
  <!-- / .wrapper --></div>
</header>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
左上のグレーのロゴの文字列が「LEVEL NORMAL」に変化していれば成功です。

navタグのhtmlコーディング

ハンバーガーメニューが現れたことによりheaderタグの中のnavタグは不要になりました。
削除しておきましょう。

  1. headerタグ内のnavタグを丸ごと削除して行を詰めておく。

index.html

<!-- 上部省略 -->
<header>
  <div class="wrapper">
    <h1 class="logo">LEVEL NORMAL</h1>
  <!-- / .wrapper --></div>
</header>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。
右上にあった「TOP」「PROFILE」の文字列は消えているでしょうか?

nav {}のcssコーディング

編集画面を「main.css」に切り替えてください。
「main.cssに記述した「nav {}」も誤動作防止のために記述を削除しておきましょう。

  1. nav {～}(35〜47行目)の記述を丸ごと削除して行を詰めておく。

main.css

/* 上部省略 */

header {
  div.wrapper {
    display: flex;
    justify-content: space-between;
    h1.logo {
      padding: 10px 20px;
      font-size: 16px;
      line-height: 30px;
      color: #fff;
      background: #999;
    }
  }
}

/* 下部省略 */

ブラウザで確認する

書き換えができたら「main.css」をCtrl + Sし、ブラウザで「index.html」を開いてF5キーしてみましょう。

これで閲覧するのがPCでもスマホでも、ハンバーガーメニューをクリック(タップ)すればドロワーメニューが表示されます。
以上がドロワーメニュー開閉に必要な内容でした。

次はレスポンシブWebデザインによって閲覧端末ごとの表示の最適化を行いましょう。

Webサイトコーディング[NORMAL] 03 CSS3 Media QueriesでレスポンシブWebデザイン対応編

RELATED POST関連記事

© 2024 RYU-YA DESIGN.

PAGE TOP
offcanvas