2020.06.04
- CSS
- HTML
シンプルなフルスクリーンメニューの作り方
グローバルナビを収納するハンバーガーメニューは、コピペで簡単に設置ができるものがブログなどでよく紹介されていますが、装飾が派手だったり、余計な動きが付いていたりなど、いざ自分のサイトに実装しようとした時には、一手間加えて修正しなければならないことがあります。
そこで今回は、cssやjQueryの記述も最小限にシンプルに止めた、レスポンシブ対応のフルスクリーンメニューをご紹介します。
二本線のハンバーガーメニュー
ヘッダーに固定されるハンバーガーメニューは、三本線で表示されるものが多くありますが、今回は二本線でつくるすっきりとしたタイプのデザインをご紹介します。
この二本線アイコンのメニューも最近のサイトでは見かけることが多くなりました。
まずは実際のイメージをご覧ください。
htmlでアイコンとメニューを記述
こちらがhtmlのソースコードです。
<div class="nav_area">
<a class="menu">
<span class="menu__line menu__line--top"></span>
<span class="menu__line menu__line--bottom"></span>
</a>
<nav class="gnav">
<div class="gnav__wrap">
<ul class="gnav__menu">
<li class="gnav__menu__item"><a href="">ABOUT</a></li>
<li class="gnav__menu__item"><a href="">WORKS</a></li>
<li class="gnav__menu__item"><a href="">NEWS</a></li>
<li class="gnav__menu__item"><a href="">CONCTACT</a></li>
</ul>
</div><!--gnav-wrap-->
</nav>
<div class="hero"></div>
</div>クラス名に”menu”がついたaタグのなかにある二つのspanタグがハンバーガーメニューのラインになります。
線の太さや色などはcssで調整していきます。
内のコンテンツがフルスクリーンで表示されるメニューです。サイトのグローバルナビに合わせてliタグ内のメニューテキストを調整してください。
cssとjQueryで挙動を追加
/*menu*/
.menu{
height: 12px;
position: absolute;
right: 20px;
top: 20px;
width: 24px;
z-index: 99;
}
.menu__line{
background: #000;
display: block;
height: 2px;
position: absolute;
transition:transform .3s;
width: 100%;
}
.menu__line--bottom{
bottom: 0;
}
.menu__line--top.active{
top: 4px;
transform: rotate(45deg);
}
.menu__line--bottom.active{
bottom: 6px;
transform: rotate(135deg);
}
/*gnav*/
.gnav{
background: #fafafa;
display: none;
height: 100%;
position: fixed;
width: 100%;
z-index: 98;
}
.gnav__wrap{
display: flex;
width: 85%;
height: 100%;
margin: auto;
position: absolute;
}
.gnav__menu__item{
margin: 3rem 0;
}
.gnav__menu__item a{
color: #000;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: .1rem;
padding: 2.5rem;
text-decoration: none;
transition: .2s;
}
.gnav__menu__item a:hover{
color: #337ab7;
}CSSでレイアウトを調整
2行目のmenuがアイコンの位置や幅の調整になります。
スクロール時に位置を固定したい場合は、ここでposition:fixedの設定とz-indexを調整します。
10行目のmenu__lineで色の調整と、ラインの太さを変更します。このラインに後述するjQueryでクリック時にactiveのクラスを追加し、ラインをtransformで回転させます。
30行目のgnavがフルスクリーンの背景になりますので、背景色の変更をbackgroundで調整します。
38行目のgnav__wrapがメニューリストのコンテンツ部分になりますので、横幅の調整やflexboxで位置の調整をしていきます。
jQueryでハンバーガーアイコンのタブにクラスを追加
最後にjQueryでハンバーガーアイコンをクリック時にラインを回転させ、非表示にしていたフルスクリーンを表示させます。
jQuery(function($){
$('.menu').on('click',function(){
$('.menu__line').toggleClass('active');
$('.gnav').fadeToggle();
});
});2行目がクリック時にどのクラス名がついたものに指示を出すかになりますので、ラインのspanタグを内包するaタグについているクラス名を指定します。
3行目がアイコンのラインであるspanタグにクラス名’active’を追加するもので、4行目がフルスクリーンメニューのクラス名”gnav”を表示させる指示になります。
以上でフルスクリーンメニューのハンバーガーアイコンの設置は完了になります。
