コント：別の世界線を描くギャル

※コードは下部へ

コード解説編

スマホサイトには欠かせない、メニューの多重線ーハンバーガーメニュー。これを作りたいなら、jQueryというJavaScriptのライブラリを使います。JSは動きの制御をするだけですので、表示-デザインに関してはCSSを使います。

まずjQueryをダウンロード

まずはjQueryをダウンロードして、HTMLに読み込ませましょう。

ダウンロードはこちら

「ブラウザに無数のアルファベットが出てきた！」という人は

ブラウザの「ファイル」から「保存」してください。

ヘッダーの設計は、、、

実用面を考えて、ヘッダーの中央にロゴを配して、

右側にハンバーガーメニューを置くという設計にします。

ロゴは幅 112px、縦45pxのもの仮定とします。

HTMLはこちら

Headerのnavに開いた時に表示するgnavと開く前の横の多重線をnav__iconを設定します。

gnavはリスト表示。最初の行にはタイトルを書くようにしています。

nav__iconはspanで表記してCSSで線を描画します。

HTML

< header id=“header”>
< nav>
< figure class=“logo”> < img src=”logo.png” width=”112″ height=”45″ alt=“logo”/></figure>

< ul id=“gnav”>
< li class=“menuTitle”>MENU </li>
<li class=“menu”>< a href=“tm_menu.html”>メニュー</a> </li>
<li class=“menu”>< a href=“tm_menu.html”>メニュー</a> </li>
<li class=“menu”>< a href=“tm_menu.html”>メニュー</a> </li>
<li class=“menu”>< a href=“tm_menu.html”>メニュー</a> </li>

< div class=“nav__icon”>
< span> </span>
< span> </span>
< span> </span>
</div>
</nav>
<!–/Nav–>
</header>

CSSはちょっとややこしいですが

Headerの高さを85pxに背景は白にしています。

ロゴの配置はデバイスの中央に常にくるようにcalcで設定。中央値の50%からロゴ画像の半分を引いた値です。nav__iconでハンバーガーの全体のサイズや配置を設定し、spanで線の描画をします。

線を多重に見せるように、それぞれの高さを設定。

タップした時にX印になるようにactiveクラスで45度の回転を指定します。真ん中の線は非表示。最後にgnavを非表示にしておきます。

CSS

#header{
margin:0 auto 85px;
position: relative;
z-index: 10;
}

/* ハンバーガーメニュー */
nav {
background: #FFF;
width: 100%;
position: fixed;
top: 0;
display: -webkit-flex;
display: flex;
align-items: center;
}

.logo {
margin-top: 25px;
margin-left: calc(50% – 112px / 2);
margin-right: auto;
}

.nav__icon,
.nav__icon span {
transition: all .5s;
}

.nav__icon {
width: 38px;
height: 25px;
margin-right: 20px;
position: relative;
cursor: pointer;
}

.nav__icon span {
background: #000;
position: absolute;
left: 0;
width: 100%;
height: 2px;
}

.nav__icon span:nth-of-type(1) {
top: 0;
}

.nav__icon span:nth-of-type(2) {
top: 12px;
}

.nav__icon span:nth-of-type(3) {
bottom: 0;
}

.nav__icon.active span:nth-of-type(1) {
-webkit-transform: translateY(12px) rotate(-45deg);
transform: translateY(12px) rotate(-45deg);
}

.nav__icon.active span:nth-of-type(2) {
display: none;
}

.nav__icon.active span:nth-of-type(3) {
-webkit-transform: translateY(-12px) rotate(45deg);
transform: translateY(-12px) rotate(45deg);
}

#gnav {
position: absolute;
top: 3px;
left: 0;
width: 70%;
z-index: 10;
text-align: left;
height: auto;
}

.menu {
background: #FFF;
width:100%;
display:block;
height: 52px;
line-height:52px;
font-size:1.2rem;
}

.menuTitle {
padding-left:8%;
background: #FFF;
width:92%;
display:block;
font-weight: bold;
height: 40px;
line-height:40px;
letter-spacing: 0.05em;
color: #000;
}

.menu a {
padding-left:8%;
display: block;
border-top: 1px solid #ededed;
letter-spacing: 0.05em;
color: #000;
}

.menu a:hover {
color: #e55ebf;
}

#gnav {
display: none;
}

最後に肝心のハンバーガー用のスクリプトを記述

Jqueryを使いますので、必ずその下部にコードを配置してください。

slideToggleを使ってgnavを表示させる設定です。

クリックイベントでnav__iconにactiveクラスを付与します。

script

$(function(){
$(‘.nav__icon’).on(“click”, function() {
$(this).toggleClass(‘active’);
$(‘#gnav’).slideToggle();
});
});

javascriptとcssの役割を切り分ける

cssでも動きは作れますが、基本的にcssは書式設定。

動かすプログラムはjavascriptに任せる、と考えておくとコードの書き分けも理解しやすいと思います。