Webサイトコーディング[NORMAL] 02 JavaScriptでドロワーメニュー実装編 - コーディング | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

Webサイトコーディング[NORMAL] 02 JavaScriptでドロワーメニュー実装編

<head></head>タグのhtmlコーディング

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

またGoogle Chromeで「index.html」を開いた状態で「F12」キーを押すと、
「Google Chromeデベロッパーツール」が開きます。

Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

必須ではありませんが、開発者用のツールであり使うことでより理解が深まるため、
コードを記述してからのページ更新時に適宜開くとよいと思います。
※「デベロッパーツール」を閉じるには「F12」キーを押しましょう

<title></title>タグのhtmlコーディング

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

<title></title>タグの文字列を変更する

まずは前回と同じように<title></title>タグの文字列変更を行いましょう。
ハイライトされている６行目の<title></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">
<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. 5行目の<link rel=”stylesheet” href=”css/main.css”>の下を改行する
  2. ハイライトされている6～9行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.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></body>タグのhtmlコーディング

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

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

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

index.html

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

ブラウザで確認する

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

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

今度はハンバーガーメニューの<button></button>タグ、
そして開閉するドロワーメニューの<nav></nav>タグを新たに追加しましょう。

注意点として、
この2点は<footer></footer>タグの終了タグと<body></body>タグの終了タグの間に追記します。

追記場所を間違えないようにしましょう。

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

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></scriptタグを追加するhtmlコーディング

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

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

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></header>タグのhtml・cssコーディング

<h1></h1>タグのhtmlコーディング

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

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

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></nav>タグのhtmlコーディング

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

  1. <header></header>タグ内の<nav></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. 「header .wrapper nav ul {～}」および「header .wrapper nav li a {}」の記述を丸ごと削除して行を詰めておく。

main.css

/* 上部省略 */
header .wrapper .logo {
  padding: 10px 20px;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
  background: #999;
}

main #mainimg {
  width: 100%;
  margin-bottom: 100px;
}
/* 下部省略 */

ブラウザで確認する

書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

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

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

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

RELATED POSTS関連記事

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE