はじめに
事故マップというサービスを個人開発しています。
このWebアプリでは、画面サイズが小さい場合は自動的にSideMenuを閉じるという動きを入れてレスポンシブなUIを実現しています。
これはCSSのmediaクエリを使えば簡単に実現できるのでその方法を紹介します。
mediaとは
CSS の media を指定すると、一つまたは複数のメディアクエリの結果に基づいて、適用するスタイルシートを変えることができます。
例えば、スクリーンのサイズが 600px 以下の場合に背景の色を変えたい時は次のように指定をします。
@mediascreenand(max-width:600px){body{background-color:#99cc00;}}Navigation SideMenuの作り方
まずは、HTML全体を3つに分けます。
- main : コンテンツを配置するエリア
- topnav : ナビゲーションバー
- sidenav : サイドメニュー
ポイントは、topnavはmainの子要素として配置し、mainはsidenavのwidthの分だけleft-marginを取るようにします。
<html><head><style>.main{margin-left:160px;}.sidenav{width:160px;}</style></head><body><divclass="sidenav"></div><divclass="main"><divclass="topnav"id="myTopnav"></div></div></body></html>次はmediaをを指定します。
やりたいことは、画面サイズが600px以下になったときにsidenavを非表示にしてmainをsidenavの分大きくすることです。
具体的には次のCSSの指定を行います。
非表示 →
display: none;サイズ変更 →
margin-left: 0px
@mediascreenand(max-width:600px){.sidenav{display:none;}.main{margin-left:0px;}}最終的なコード例
<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>body{margin:0;font-family:Arial,Helvetica,sans-serif;}.topnav{overflow:hidden;background-color:#333;}.topnava{float:left;display:block;color:#f2f2f2;text-align:center;padding:14px16px;text-decoration:none;font-size:17px;}.topnava:hover{background-color:#ddd;color:black;}.topnava.active{background-color:#4CAF50;color:white;}.topnav.icon{display:none;}.main{margin-left:160px;/* Same as the width of the sidenav */font-size:28px;/* Increased text to enable scrolling */padding:0px;}.sidenav{height:100%;width:160px;position:fixed;z-index:1;top:0;left:0;background-color:#111;overflow-x:hidden;padding-top:20px;}.sidenava{padding:6px8px6px16px;text-decoration:none;font-size:25px;color:#818181;display:block;}.sidenava:hover{color:#f1f1f1;}@mediascreenand(max-width:600px){.topnava.icon{float:right;display:block;}.sidenav{display:none;}.main{margin-left:0px;}}</style></head><body><divclass="sidenav"><ahref="#about">About</a><ahref="#services">Services</a><ahref="#clients">Clients</a><ahref="#contact">Contact</a></div><divclass="main"><divclass="topnav"id="myTopnav"><ahref="#home"class="active">Home</a><ahref="javascript:void(0);"class="icon"onclick="myFunction()"><iclass="fa fa-bars"></i></a></div><divstyle="padding-left:16px"><h2>Responsive Topnav Example</h2><p>Resize the browser window to see how it works.</p></div></div></body></html>上記のコードはここですぐに試す事ができます。