スマホ向けのヘッダーについて
はじめに
スマホの画面幅は、iphone6/7/8 Plusの場合414pxです。
WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが最適かと思います。
しかし、スマホの場合
このようにした方が、ユーザーにとって使いやすくなるでしょう。
これをどのように実装すれば良いのかを書いていきます。
筆者の環境
OS・・・Mac
ブラウザ・・・Google Crome
スマホ用の画面・・・Cromeの検証ツールを利用しています。
ヘッダーアイコンを作成する
まずは、クリックしたらヘッダーのメニューが表示されるボタンの見た目を作っていきます。
HTML
<div class="header-icon">
<i class="fas fa-bars"></i>
</div>
これをheaderクラスの外に追記します。
<i class="fas fa-bars"></i>
ここでは、Font Awesomeを使用しています。
Font Awesomeについては、
以前、こちらの記事に書きました。
スマホ向けのCSS
.header-icon {
display: block;
top: 15px;
right: 15px;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 40px;
font-size: 16px;
position: fixed;
}
アイコンを包んでいるCSSはこのようにしました。
display: block;
とありますが、
これは、PC向けのCSSで
.header-icon {
display: none;
}
としているためです。
つまり、PCの場合はアイコンが表示されずに、スマホの場合は表示されるようにしています。
スマホ向けに適応されるCSSについては、
以前、こちらの記事に書きました。
以上の記述で、
このようなアイコンを作ることができました。
モーダルを作成する
次に、先ほどのアイコンをクリックした時に表示されるモーダルを作成していきます。
モーダルの作成方法については、
この記事にも書いています。
HTML
<div class="header-modal">
<div class="modal-title">Workspace</div>
<div class="modal-menus">
<h1>フリーランス</h1>
<div class="modal-menu"><P>特徴</P><i class="fas fa-angle-right"></i></div>
<div class="modal-menu"><P>募集案件</P><i class="fas fa-angle-right"></i></div>
<div class="modal-menu"><P>使い方</P><i class="fas fa-angle-right"></i></div>
<div class="modal-menu"><P>よくある質問</P><i class="fas fa-angle-right"></i></div>
<div class="modal-menu" id="boder-none">
<P>ログイン</P>
<i class="fas fa-angle-right"></i>
</div>
</div>
<div class="modal-menus">
<h1>採用担当者</h1>
<div class="modal-menu"><P>ログイン</P><i class="fas fa-angle-right"></i></div>
<div class="modal-menu">
<P>採用担当者はこちら</P>
<i class="fas fa-angle-right"></i>
</div>
</div>
</div>
ヘッダーアイコンのdiv要素の下に、このようなモーダルの記述を追加します。
<div class="header-modal">
</div>
header-modalの中に
<div class="modal-title"></div>
modal-titleが1つ
<div class="modal-menus">
</div>
modal-menusが2つあるという構造になっています。
PC用のCSS
.header-modal {
background-color: #fff;
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: 100;
}
デフォルトでは、
display: none;
によって、モーダルを隠しています。
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
位置は、画面の高さいっぱいで固定しています。
z-index: 100;
z-indexは100なので、最も手前に来るようになっています。
モーダル内の細かいスタイルは、スマホ用CSSファイルに書きました。
スマホ用CSS
.modal-title {
font-size: 30px;
margin: 10px;
}
.modal-menus h1 {
color: #fff;
background-color: black;
padding: 5px 10px;
}
.modal-menu {
display: flex;
justify-content: space-between;
border-bottom: 1px solid gray;
}
#boder-none {
border-bottom: 1px solid #fff;
margin-bottom: 0;
}
.modal-menu p {
padding-bottom: 10px;
margin: 10px 0 0 10px;
}
.modal-menu .fas {
margin: 10px;
}
上記が適応されると、
このようなモーダルが出来上がります。
クリックイベントを作成する
最後に、アイコンをクリックしたらモーダルが表示されるようにします。
jQuery
$('.header-icon').click(function(){
if($(this).hasClass('open')){
$('.header-modal').slideUp();
$(this).html('<i class="fas fa-bars"></i>');
$(this).removeClass('open');
}else{
$('.header-modal').slideDown();
$(this).html('<i class="fas fa-times"></i>');
$(this).addClass('open');
};
});
$('.header-icon').click(function(){
});
まずは、アイコンをクリックした時のイベントを発生させています。
アイコンのクラス名は、
<div class="header-icon">
<i class="fas fa-bars"></i>
</div>
header-iconでした。
if($(this).hasClass('open')){
}else{
};
次に、条件分岐をさせています。
ヘッダーアイコンが、openというクラスを持っているときは、はじめの処理が実行されます。
持っていないときは、後の処理が実行されます。
ヘッダーアイコンは、最初はheader-iconというクラスしか持っていないため、最初に実行されるのは、else以下の処理です。
elseの中身を見ていきます。
else{
$('.header-modal').slideDown();
$(this).html('<i class="fas fa-times"></i>');
$(this).addClass('open');
};
まず
$('.header-modal').slideDown();
によって、モーダルが表示されます。
そして
$(this).html('<i class="fas fa-times"></i>');
htmlメソッドによって、アイコンのhtmlが書き換わります。
これは、
このようにアイコンが置き換わるという意味です。
$(this).addClass('open');
その後、ヘッダーアイコンにopenというクラスが付きます。
つまり、次のクリックイベントが起こった時に、if文の最初の処理が実行される準備が整ったということです。
if文の最初の処理を見ていきます。
if($(this).hasClass('open')){
$('.header-modal').slideUp();
$(this).html('<i class="fas fa-bars"></i>');
$(this).removeClass('open');
}
ヘッダーアイコンがopenというクラスを持っている時は、この状態です。
モーダルが表示されている時です。
この時に、ヘッダーアイコンをクリックしたら
$('.header-modal').slideUp();
モーダルが非表示になり
$(this).html('<i class="fas fa-bars"></i>');
バツのアイコンがメニューアイコンに置き換えられ
$(this).removeClass('open');
openというクラスが外れます。
つまり、次にヘッダーアイコンをクリックしたらelse以下の処理が実行されます。
jQuery
$('.header-icon').click(function(){
if($(this).hasClass('open')){
$('.header-modal').slideUp();
$(this).html('<i class="fas fa-bars"></i>');
$(this).removeClass('open');
}else{
$('.header-modal').slideDown();
$(this).html('<i class="fas fa-times"></i>');
$(this).addClass('open');
};
});
