それCSS4じゃなくても出来るよ。CSS3だけで作るクリックタイプのドロップダウンメニュー
こちらの記事をみて
[【CSS4】:focus-withinでクリックタイプのドロップダウンメニュー？]
(http://qiita.com/chisyamori/items/37ad3489a93c769156af)
それCSS4じゃなくても出来るよ。
前回の記事は、このクリックタイプのドロップダウンメニューの応用なので、こちらで解説します。
ちなみに、:checked疑似要素と隣接セレクタを使ったテクニックはものすごく昔から使われています。ただ、ものすごく、ぐぐり にくいだけで
-
:checked疑似要素と隣接セレクタを使ったCSSだけでLight Box
-
qiitaだとここらへんとか
デモ
| デモサイト(Codepen) |
コード
HTML
html
<label for="menuOn">
<input id="menuOn" type="checkbox">
<menu>
<ul>
<li><a href="#menu1">概要</a>
<li><a href="#menu2">menu2</a>
<li><a href="#menu3">menu3</a>
<li><a href="#menu4">menu4</a>
<li><a href="#menu5">menu5</a>
<li><a href="#menu6">動作環境</a>
<li><a href="#menu7">仕様</a>
<li><a href="#menu8">免責事項</a>
</ul>
</menu>
<div class="overlay"></div>
</label>
CSS
css
/* ========================================================== */
/* ここから下がメニューの設定 */
/* ========================================================== */
/* メニューのON/OFFを保存する為のチェックボックス 非表示 */
# menuOn{
display : none
}
menu{
position : relative;
font-size : 20px;
line-height : 20px;
height : 40px;
width : 100%;
min-width : 200px;
background : black;
}
/* メニュー */
# menuOn:checked + menu{
max-width : 960px;/*コンテナと同じ数値を指定しておく必要あり*/
z-index : 20;
}
/* オーバーレイ */
/* メニューが表示されているときに */
/* LightBoxのように画面全体を覆うブロックを表示する */
/* これによってメニュー部分を除いて */
/* 画面全体がチェックボックスへのクリックになるので */
/* メニュー以外の部分をクリックするとメニューが閉じます */
# menuOn:checked + menu + div.overlay{
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
z-index : 10;
background : rgba(0,0,0,0.5);
}
# menuOn:checked + menu ul{
display: block;
}
ul{
position: absolute;
top : 40px;
right : 0;
display: none;
}
li{
list-style-type : none;
/* メニュー要素の背景色と合わせる*/
background : black;
min-width : 105px;
max-width : 200px;
white-space : nowrap;
text-overflow : ellipsis;
}
li a{
display : block;
padding : 10px;
}
/* ハンバーガーメニュー */
# menuOn + menu::after {
position : absolute;
z-index : 30;
display : block;
content : '\2261';/* ハンバーガーメニュー*/
line-height : 40px;
width : 20px;
padding-left : 10px;
color : white;
right : 0;
top : 0;
background : black;
}
/* メニューを閉じる */
# menuOn:checked + menu::after {
content : '×';/* 閉じるボタン */
}
解説
特に説明は要らないと思うけど要点だけ、まず、:checked疑似要素と隣接セレクタでメニューの開閉をやっています。メニューを開いているときに、オーバーレイのブロックが画面一杯に広がっているところがポイントです。CSSでLightBoxやモーダルウインドウのテクニックで使われている奴ですね。あとは単に、ULでリスト作っているだけです。
動作環境
基本的に最新ブラウザであれば対応していますが、わりと古い技術を使っているので、IEの古い奴とかじゃなければ動くかもしれない。IE10のエミュレーションモードでは動作。IE9のエミューレーションモードは無理だった。Operaは未確認。
- 動作確認済みブラウザ
| Windows 7 | Chrome 56.0.2924.87 (64-bit) |
|---|---|
| Firefox 51.0.1 (32 ビット) | |
| IE11 11.0.38 | |
| macOS Sierra(10.12.2) | Chrome 56.0.2924.87 (64-bit) |
| Firefox 52.0.1 (64 ビット) | |
| Safari 10.0.2 | |
| iOS 9.3.5 | mobile safari |
| Android 5.0.0(ZenFone2) | chrome 54.0.2840.68 |
| ASUS Browser(標準ブラウザ) 2.1.2.71_160715 |
免責事項
基本的に実用上は問題ないレベルに仕上がっているとは思っていますが、ご利用は自己責任でお願いします。