もし初めて作るのであれば、作ること自体はコピペで行けますので、簡単です。
理解するのは少し難しいのでゆっくり学習していきましょう。
理解しやすくするためできるだけ量を最低限にし、簡潔にしています。
始めに今回制作する完成物をご覧ください
あくまで最小の工程で完成させるため、簡潔なverです。
この下にしっかりコーディングしたものも載せています。
See the Pen PopLJJr by イヌノテ (@inunote) on CodePen.
しっかりコーディングしたverはこちらです。
任意のCSSを付与することでいい感じの見た目になります
See the Pen ZEePXKL by イヌノテ (@inunote) on CodePen.
HTML
HTML部分は割と簡単です。
下記はHTML部分の全容です。
<nav id="nav">
<ul>
<li><a href="xxx.html">AAA</a></li>
<li><a href="xxx.html">BBB</a></li>
<li><a href="xxx.html">CCC</a></li>
</ul>
</nav>
<div id="hamburger">
<span class="line" id="line1"></span>
<span class="line" id="line2"></span>
<span class="line" id="line3"></span>
</div>詳しく解説します
【HTML】ナビゲーションメニュー
<nav id="nav">
<ul>
<li><a href="xxx.html">AAA</a></li>
<li><a href="xxx.html">BBB</a></li>
<li><a href="xxx.html">CCC</a></li>
</ul>
</nav>
まずナビゲーション(nav)とidを付与した＜nav＞の中に
＜ul＞と＜li＞でリストを作ります。
これはナビゲーションメニューを押した際に出てくるメニュー部分に当たります。
もちろん押したら別リンクへ飛ぶようにしたいので、子要素（中に）＜a＞を入れます。
href=”xxx.html”はリンク先を指定し、AAAやBBBは実際に表示される部分です。
【HTML】ハンバーガー部分
次は、実際に押すハンバーガー部分、三本線の書き方です。
<div id="hamburger">
<span class="line" id="line1"></span>
<span class="line" id="line2"></span>
<span class="line" id="line3"></span>
</div>まずdivで領域を決めます。名前はハンバーガーにしましょう。
＜span class=”line” id=”line1″＞＜/span＞
この1セットで三本線のうちの1本になります。
これを三つ、divで囲むことで、三本の線が1セット扱いできます。
三本の矢、アベノミクスと同じですね。
（三ツ矢サイダーの見たい）
クラスにlineを付けます。これは三本に共通するCSSを書くため、
そして3本の線は全く同じではないので、少し違うCSSを書くためのidをそれぞれ決めましょう。
CSS
CSSは少し量が多くなります
#nav{
position: fixed;
top: -100%;
width: 100%;
height: 100%;
transition: 1s;
overflow:hidden;
}
#hamburger{
position:fixed;
display: block;
top: 10px;
left: 30px;
width: 50px;
height: 44px;
transition: 1s;
z-index:100;
}
.line{
position: absolute;
display: block;
left: 15px;
width: 50px;
height: 3px;
background-color: black;
transition: 1s;
}
#line1{
top: 0;}
#line2{
top: 20px;}
#line3{
top:40px;
}
.down{
transform: translateY(100%);
}
.line_1{
transform: translateY(20px) rotate(-45deg);
top:0;
}
.line_2{
opacity:0;
}
.line_3{
transform: translateY(-20px) rotate(45deg);
top: 40px;
}これでCSSは終わりです。
ではまた、ひとつずつ解説していきます。
【CSS】ナビゲーションメニュー
#nav{
position: fixed;
top: -100%;
width: 100%;
height: 100%;
transition: 1s;
overflow:hidden;
}
まずnavにfixedを使い場所を固定します。
今回は上から下に現れるタイプを記述しているので、top はー100％です
もし左から出現させたい場合、top0のleft-100％にしましょう。
画面外に隠れていたnavを真ん中に持ってくる感じですね
overflow:hiddenでははみ出たものは隠すという意味です。
これをしないとせっかく画面外に出した部分が表示されます。
ありがた迷惑な話です。
【CSS】ハンバーガー部分
#hamburger{
position:fixed;
display: block;
top: 10px;
left: 30px;
width: 50px;
height: 44px;
transition: 1s;
z-index:100;
}次のこれはこの後説明する三本の線をひとくくりで位置付ける役割をします。
z-indexでは数値が高い順に重なりが一番上になります。
クリックしてイベントを発生させるものになるので１００と高い数値を与えます
.line{
position: absolute;
display: block;
left: 15px;
width: 50px;
height: 3px;
background-color: black;
transition: 1s;
}
次にこれで三本の実線を書きます。
要は高さが3px幅が50pxの小さな領域の背景が黒い
この要領で線を書きます。
それぞれ左から15pxで上からは
#line1{
top: 0;}
#line2{
top: 20px;}
#line3{
top:40px;
}という感じです
JavaScript部分
.down{
transform: translateY(100%);
}
.line_1{
transform: translateY(20px) rotate(-45deg);
top:0;
}
.line_2{
opacity:0;
}
.line_3{
transform: translateY(-20px) rotate(45deg);
top: 40px;
}はい、最後にややこしいのがここです。
まず先程のnavにdownというクラスをこの後JavaScriptで与えます。
inというのはtop-100%に隠れていたnavをtranslateY（Yは縦軸）で100％にします。（下におろします。）
次にline_1はline1に与えられます。
line2にはline_2を与えます。
プレビュー画面を見ていただいたらわかりやすいですが、三本の線をクリック後バツになるよう動きを与えています。
それがここのCSSで、translateで角度を変え、opacityで透明にしています。
JavaScript
ささ本詰めJavaScriptのお時間です。
今回はあえてjQueryを使用せずに説明したいと思います
function hamburger(){
document.getElementById('line1').classList.toggle('line_1');
document.getElementById('line2').classList.toggle('line_2');
document.getElementById('line3').classList.toggle('line_3');
document.getElementById('nav').classList.toggle('in'); }
document.getElementById('hamburger').addEventListener('click' , function(){
hamburger();
});以上がコードになります。
これをhtmlのbodyの一番最後のほうに＜script＞ここ＜/script＞の間に書いてください。
function hamburger(){}の解説
まずfunctionというのは、function以下の指示を行います！という宣言みたいなものです。
その宣言に名称を付けたのがhamburgerという名前です。
この｛｝の中に具体的な指示を書いていきます。
document.getElementById(‘line1’).classList.toggle(‘line_1’);の解説
html文書の中からline1というidの要素を取得し、line_1というクラスを付け外しする。（付いてないときはつける。ついているときは外す）
という意味になります。
これを1，2，3分します。
同様にdocument.getElementById(‘nav’).classList.toggle(‘in’);も行います。
document.getElementById(‘hamburger’).addEventListener(‘click’ , function(){
hamburger();
});の解説
これで最後です。JavaScriptでは何かするたびにhtmlから要素の取得をしないと、「うまく機能しません」
では、hamburgerというidの要素を取得し、イベントを行ってください。という指示です。
けどこのイベントの発生条件がaddEventListener(の（）内
(‘click’ , function(){
hamburger();
});
クリックしたときにhamburger()を行うです。
このときのhamburger()というのは、先ほど定義したfunction hamburger()です。
理解はこれでわかってくれたらうれしいな。と思います。
説明は以上となりますので、またわからないことがあれば、質問受け付けています。
