こんにちは。
野球とかインターハイとかインカレとか見てたらスポーツをしたくなったyasaiです。
もうすぐスポーツの秋ですが、今年もきっと食欲と読書と仕事の秋なんだろうなぁ。
さて今回は最近ハンバーガーメニューを使ったグローバルメニューの案件が多かったので、
何となく自分向けの備忘録です。
実装はHTMLとCSSだけ。Javascriptは使いません。
HTML
<nav class="hamburger_menu"> <input type="checkbox" id="hamburger__btn"> <label for="hamburger__btn" class="hamburger__btn"><span></span></label> <div class="menu_content"> <ul> <li><a href="">menu01</a></li> <li><a href="">menu02</a></li> <li><a href="">menu03</a></li> <li><a href="">menu04</a></li> <li><a href="">menu05</a></li> <li><a href="">menu06</a></li> </ul> </div> </nav>
Javascriptを使わないので、メニューのオンオフの切り替えはcheckboxで行います。
Label要素の中に空のspan要素を配置したのは、span要素の疑似要素を使って3本線を表現するためです。
CSS
sassの記述はこうなりました。以下sassで記述します。
.hamburger_menu
#hamburger__btn{
display: none;
& ~ .menu_content {
visibility: hidden;
}
&:checked ~ .menu_content {
visibility: visible;
}
}
.hamburger__btn{
display: block;
width: 40px;
height: 40px;
border-radius: 0 0 5px 5px;
background-color: #ccc;
position: fixed;
top: 0;
right: 10%;
z-index: 100;
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
span {
width: 100%;
height: 100%;
display: block;
position: relative;
&:before,
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
&:before {
top: 25%;
}
&:after {
bottom: 25%;
}
}
}
.menu_content{
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translateX(-50%) translateY(-50%);
&:after {
content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;
}
a {
color: #fff;
text-decoration: none;
}
}
#hamburger__btn:checked{
& ~ .menu_content:after {
width: 200vw;
height: 200vh;
}
& ~ .hamburger__btn{
&:after {
content: none;
}
span{
&:before,
&:after{
left: 44%;
transform: translateX(-50%);
}
&:before{
top: 25%;
transform: rotate(-45deg) translateX(-50%);
transform-origin:center center;
}
&:after{
bottom: 25%;
transform: rotate(45deg) translateX(-50%);
transform-origin:center center;
}
}
}
}
}
ちょっと長くなりましたが、やってることは順序は前後しますが①メニューの切り替え、②メニューがオンになったときのスタイル、③メニューのページに対する絶対配置です。
①メニューの切り替え
#hamburger__btn{
display: none;
& ~ .menu_content {
visibility: hidden;
}
&:checked ~ .menu_content {
visibility: visible;
}
}
checkbox自体は非表示にして、label要素のクリックでオンオフを切り替えます。
関節セレクタ~と:checked擬似クラス セレクタを使ってcheckbox以降の兄弟要素のスタイルを変えていきます。
②メニューがオンになったときのスタイル
メニューがオンになったときには、
- メニューの内容がオーバーレイでページのセンターに表示される。
- メニューボタンの3本線が×マークになる。
です。
1.メニューの内容がオーバーレイでページのセンターに表示
.menu_content{
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translateX(-50%) translateY(-50%);
&:after {
content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;
}
a {
color: #fff;
text-decoration: none;
}
}
#hamburger__btn:checked{
& ~ .menu_content:after {
width: 200vw;
height: 200vh;
}
}
メニューの中身(ul要素)を画面中央にfixedし、そのafter疑似要素でオーバーレイ部分を作ります。オンになったら拡大するアニメーションにしました。
2.メニューボタンの3本線が×マークになる。
.hamburger__btn{
display: block;
width: 40px;
height: 40px;
border-radius: 0 0 5px 5px;
background-color: #ccc;
position: fixed;
top: 0;
right: 10%;
z-index: 100;
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
span {
width: 100%;
height: 100%;
display: block;
position: relative;
&:before,
&:after {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
&:before {
top: 25%;
}
&:after {
bottom: 25%;
}
}
}
#hamburger__btn:checked{
& ~ .hamburger__btn{
&:after {
content: none;
}
span{
&:before,
&:after{
left: 44%;
transform: translateX(-50%);
}
&:before{
top: 25%;
transform: rotate(-45deg) translateX(-50%);
transform-origin:center center;
}
&:after{
bottom: 25%;
transform: rotate(45deg) translateX(-50%);
transform-origin:center center;
}
}
}
}
3本線はlabel要素(.hamburger__btn)の疑似要素で中央に1本。その子要素spanの疑似要素で上下に引いています。
メニューがオンになったときは中央の線を非表示にして子要素spanの線を45度回転させました。
③メニューのページに対する絶対配置に関しては、そのままなので割愛します。
ただ、チェックボックスがオーバーレイの上に来ないと切替が出来なくなってしまうのでご注意を。
ハンバーガーメニューを使うにあたって
今回制作した案件はPCサイズでもハンバーガーメニューを使うデザインだったのですが、ハンバーガーメニューからしかページ遷移ができないページの場合に、ちょっと使い勝手が悪く感じました。
メニューの内容が見えているグローバルメニューと違って、1クリックしないとメニューの内容がわからない、移動できないっていうのは、使う側からするといささか不便なんだなぁと。
視線がページのコンテンツを読むために上から下に流れっていって、そこからページ遷移のためにハンバーガーメニューを探すっていうのがいかんのかも。
スマホの場合はコンテンツの終わりとハンバーガーメニューを同時に視界にとらえられるので、そこまで違和感ないんですけどね。
ハンバーガーメニュー使うときは、コンテンツの中からページ遷移させるためのテキストリンクやボタンが見てくれる人のために必要なんだなと感じたのでした。
最後にsassだけじゃなくてメニュー部分のCSSへ切り出したファイルもリンクしておきますね。
今回参考にさせていただいたサイト様
Pure CSS Fullscreen Navigation Menu
