xhml・html
レスポンシブWebデザイン 2カラム左メニュー有り メニュー
2019年03月18日
【ネットビジネス便利ツール】のモバイル対応の続きです。いよいよ肝のメニュー部分です。
レスポンシブWebデザイン チェック・プルダウン表示非表示のチェックボックで表示非表示を切り替える方法を使います。
PCとタブレットは今までの様に2カラムで表示します。
実際の画面です。
スマートフォンでは左メニューの内容は隠しておき、必要に応じて表示されるようにします。横長のバーに左メニューの内容を表示するリンクを表示、クリックすると左メニューの内容が表示されます。
実際の画面です。左メニューの【⇒メニュー】をクリックすると、メインコンテンツの上にメニューが表示されます。よくハンバーガーメニュー（三のように横線が3本あるアイコン）で表現されています。もっとはっきりメニューと表示してみました。
メニューの横についでにHomeとTopも表示しました。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）を参考にしました。ありがとうございます。
ハンバーガーメニューの代わりに【⇒メニュー】を表示、
HomeとTopのリンクを表示、
Closeをクリックしてもメニューを閉じるように、
iOSでスクロールがツイーット（慣性スクロールと言うらしい）いかないので、そのためのプロパティも加えています。
メニューの表示非表示の切り替えは、レスポンシブWebデザイン チェック・プルダウン表示非表示のチェックボックスの方法を使います。
下のhtmlにあるid：menu-inputのチェックボックスへのチェックの有り無しで表示非表示を切り替えます。
チェックボックスに関連付けられたラベルが3つあります。
id：menu-open
id：menu-closs
id：menu-close-x
の3つです。
チェックボックスはcssで非表示に設定しているので、実際の操作はこれら3つのラベルで行います。
id：menu-open ⇒ 【⇒メニュー】をクリックすると画面に半透明なグレーカバーを表示、その上にid：menu-contentのdiv内を表示します。
id：menu-closs ⇒ メニュー表示時に右のグレー部分をクリックするとid：menu-contentのdiv内を非表示にします。
id：menu-close-x ⇒ メニュー内の【Close】をクリックするとid：menu-contentのdiv内を非表示にします。
これらは全てcssでコーディングされています。
html -------------------------------------------------
左メニューはcssの初期化が簡単になるように、モバイルファーストとPCファーストが混在しています。
css ---------------------------------------------------
PCとタブレットでは常にメニューを表示、スマートフォンでは状況に応じて切り替えをcssで書くのに時間がかかりました。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）ではWordpressでの書き方が紹介されています。やっぱりWordpressだと簡単にできるようですね。
Wordpressをお使いの方はスッと適用してください。私は勉強、勉強。
時間がかかってしまいましたが、サイトのコンテンツの内容を大幅書き換え予定なので、もしかしたら、その時また形式を変えるかもしれません。左右の空いている箇所にメニューを置いて本文の幅を広げることも考えています。
内容を書き換えてみて、より読みやすいレイアウトにする予定です。
レスポンシブWebデザイン チェック・プルダウン表示非表示のチェックボックで表示非表示を切り替える方法を使います。
PCとタブレットは今までの様に2カラムで表示します。
実際の画面です。
スマートフォンでは左メニューの内容は隠しておき、必要に応じて表示されるようにします。横長のバーに左メニューの内容を表示するリンクを表示、クリックすると左メニューの内容が表示されます。
実際の画面です。左メニューの【⇒メニュー】をクリックすると、メインコンテンツの上にメニューが表示されます。よくハンバーガーメニュー（三のように横線が3本あるアイコン）で表現されています。もっとはっきりメニューと表示してみました。
メニューの横についでにHomeとTopも表示しました。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）を参考にしました。ありがとうございます。
ハンバーガーメニューの代わりに【⇒メニュー】を表示、
HomeとTopのリンクを表示、
Closeをクリックしてもメニューを閉じるように、
iOSでスクロールがツイーット（慣性スクロールと言うらしい）いかないので、そのためのプロパティも加えています。
メニューの表示非表示の切り替えは、レスポンシブWebデザイン チェック・プルダウン表示非表示のチェックボックスの方法を使います。
下のhtmlにあるid：menu-inputのチェックボックスへのチェックの有り無しで表示非表示を切り替えます。
チェックボックスに関連付けられたラベルが3つあります。
id：menu-open
id：menu-closs
id：menu-close-x
の3つです。
チェックボックスはcssで非表示に設定しているので、実際の操作はこれら3つのラベルで行います。
id：menu-open ⇒ 【⇒メニュー】をクリックすると画面に半透明なグレーカバーを表示、その上にid：menu-contentのdiv内を表示します。
id：menu-closs ⇒ メニュー表示時に右のグレー部分をクリックするとid：menu-contentのdiv内を非表示にします。
id：menu-close-x ⇒ メニュー内の【Close】をクリックするとid：menu-contentのdiv内を非表示にします。
これらは全てcssでコーディングされています。
html -------------------------------------------------
<nav id="menu">------------------------------------------------------
<div id="menu-drawer">
<!-- チェックボックスを非表示 -->
<input type="checkbox" id="menu-input" class="menu-unshown">
<!-- forでチェックボックスに関連付ける -->
<label id="menu-open" for="menu-input">メニュー</label>
<span class="nav"><a href="https://benri-tools.net/">Home</a></span>
<span class="nav"><a href="#pagetop">Top↑</a></span>
<!-- forでチェックボックスに関連付ける -->
<label id="menu-close" for="menu-input" class="menu-unshown"></label>
<div id="menu-content">
<!-- forでチェックボックスに関連付ける -->
<label id="menu-close-x" for="menu-input" class="menu-unshown">Close</label>
メニューの内容
</div>
</div>
</nav>
左メニューはcssの初期化が簡単になるように、モバイルファーストとPCファーストが混在しています。
css ---------------------------------------------------
/* ↓ +++++ PCファースト +++++ */------------------------------------------------------
#menu {
z-index: 99; /* モバイル時フッタが上に来るのを防ぐため */
float: left;
width: 210px;
}
@media (max-width: 767px) {
/* スマートフォンだけ画面上部へ表示 */
#menu {
width: 100%;
height: 30px;
position: absolute;
top: 120px;
}
/* スマートフォンだけ画面最上部までスクロール後固定 */
/* トップメニュー固定の項目で説明します */
#left_menu.fixed{
position: fixed;
top: 0;
}
}
/* ↑ +++++ PCファースト +++++ */
/* ↓ +++++ モバイルファースト +++++ */
@media (min-width: 768px) {
/* PC・タブレットの時は非表示 */
.nav {
display: none;
}
}
/* ↑ +++++ モバイルファースト +++++ */
/* ↓ +++++ PCファースト +++++ */
.menu-unshown {
display:none;
}
/* ⇒メニューのプロパティ */
#menu-open {
display:none;
}
/* メニューの中身 */
#menu-content {
padding-bottom: 20px;
}
/* Closeのプロパティ */
#menu-close-x {
display: none;
}
@media (max-width: 767px) {
#menu-drawer {
position: relative;
}
/* ⇒メニューのプロパティ */
#menu-open {
display: inline-block;
height: 22px;
vertical-align: middle;
cursor: pointer;
background: url(⇒の画像へのパス);
background-repeat: no-repeat;
background-position: left center;
}
/* メニュー後ろのグレーカバーのプロパティ */
#menu-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/* Closeのプロパティ */
#menu-close-x {
display: block;
}
/* メニュー中身のプロパティ */
#menu-content {
/* ↓ iOSでの慣性スクロールにするため */
overflow: scroll;
-webkit-overflow-scrolling: touch;
/* ↑ */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px;
height: 100%;
background: #FFFFFF;
transition: .3s ease-in-out; /*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%); /*左に隠しておく*/
}
/* id=menu-inputにチェックが入ったらid=left-closeに適用するプロパティ */
#menu-input:checked ~ #left-close {
display: block; /*カバーを表示*/
opacity: .5;
}
/* id=menu-inputにチェックが入ったらid=left-contentに適用するプロパティ */
#menu-input:checked ~ #left-content {
-webkit-transform: translateX(0%);
transform: translateX(0%); /*中身を表示*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* id=menu-inputにチェックが入ったらid=left-close-xに適用するプロパティ */
#menu-input:checked ~ #left-close-x {
display: block;
opacity: .5;
}
}
/* ↑ +++++ PCファースト +++++ */
PCとタブレットでは常にメニューを表示、スマートフォンでは状況に応じて切り替えをcssで書くのに時間がかかりました。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）ではWordpressでの書き方が紹介されています。やっぱりWordpressだと簡単にできるようですね。
Wordpressをお使いの方はスッと適用してください。私は勉強、勉強。
時間がかかってしまいましたが、サイトのコンテンツの内容を大幅書き換え予定なので、もしかしたら、その時また形式を変えるかもしれません。左右の空いている箇所にメニューを置いて本文の幅を広げることも考えています。
内容を書き換えてみて、より読みやすいレイアウトにする予定です。
コメント
