ハンバーガーメニューについての質問です

現在Html,css,JavaScript(jQuery)を使用しホームページを作っています。
ポケモン公式サイトのような動きをするハンバーガーボタンを画面にヘッダーとしてスクロール時も固定して導入したいです
検索ボタンの導入はPHPが触れないので考えていません
親が自営業のため独学で学びつつホームページを制作しているのですがまだHtml,css以外はほとんどわからずいろいろ検索しながら3本線からバツに変わる動きだけはJavascriptとjQueryを使用するとこまではなんとか出来ました。
メニュー自体はずっと出ている状態であればHtmlとcssで一応できますがうまく3本線をクリック(タップ)した時にメニューが出るようにするという合わせ技ができません

・スクロールをしても画面の左端、または右端にメニューアイコンを固定
・メニューを押すと下にずらっとメニューが出る
・上にカーソルを持って行くと色がつく

というのが理想なのですが実現するにはどういったプログラムにしたらいいのでしょうか
うまく説明できなくてすいません

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/05/04 17:53

ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答1件

的外れかもしれませんが、以下のような挙動でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7    <style type="text/css">
8        .navbar-left {
9            float: left;
10            margin-left: 15px;
11        }
12
13        .navbar-toggle .icon-bar {
14            position: relative;
15            transition: all 200ms;
16        }
17
18        .navbar-toggle.active .icon-bar:nth-of-type(1) {
19            top: 6px;
20            transform: rotate(45deg);
21        }
22
23        .navbar-toggle.active .icon-bar:nth-of-type(2) {
24            background-color: transparent;
25        }
26
27        .navbar-toggle.active .icon-bar:nth-of-type(3) {
28            top: -6px;
29            transform: rotate(-45deg);
30        }
31
32        .navbar-nav li:hover:nth-of-type(1) {
33            background-color: #f54337 !important;
34        }
35
36        .navbar-nav li:hover:nth-of-type(2) {
37            background-color: #03a9f5 !important;
38        }
39
40        .navbar-nav li:hover:nth-of-type(3) {
41            background-color: #ff9800 !important;
42        }
43
44        .box {
45            width: 100%;
46            height: 1000px;
47            background-color: #ffff00;
48        }
49    </style>
50</head>
51<body>
52<div class="navbar navbar-default navbar-fixed-top">
53    <div class="navbar-header">
54        <button type="button" class="navbar-toggle navbar-left" data-toggle="collapse" data-target=".navbar-collapse">
55            <span class="icon-bar"></span>
56            <span class="icon-bar"></span>
57            <span class="icon-bar"></span>
58        </button>
59        <a class="navbar-brand" href="#">タイトル</a>
60    </div>
61    <div class="navbar-collapse collapse">
62        <ul class="nav navbar-nav">
63            <li>
64                <a href="#">メニュー1</a>
65            </li>
66            <li>
67                <a href="#">メニュー2</a>
68            </li>
69            <li>
70                <a href="#">メニュー3</a>
71            </li>
72        </ul>
73    </div>
74</div>
75<div class="box"></div>
76<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
77<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
78<script>
79    $(".navbar-toggle").on("click", function () {
80        $(this).toggleClass("active");
81    });
82</script>
83</body>
84</html>