Pure CSS Drawer Menu.
2013-11-15 パソコン倶楽部りんごでの勉強会でやったことを自分なりにまとめました。説明が前後したりすると思いますが、ご了承ください。
2013-11-16 http://nobu-69.com/others.html
2013-11-15 パソコン倶楽部りんごでの勉強会でやったことを自分なりにまとめました。説明が前後したりすると思いますが、ご了承ください。
2013-11-16 http://nobu-69.com/others.html
大きくは2つです。左のnavと右のコンテンツdiv。スマホ等の表示領域が狭い場合に常にグローバルメニューがあると、コンテンツ領域が狭くなりユーザビリティが良くありません。なので、メニューは常に隠しておいて、必要な時に出現させます。ちなみにDrawer(ドロワー)とは机とかの引き出しという意味です。基本的にはスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。
レスポンシブデザインになっていますので、横幅を変えてみたりして下さい。メニューを出すには、画面左上の≡をクリック。
body,html { margin:0; padding:0; } body { background:pink; overflow-x:hidden; -webkit-perspective: 1600px; perspective: 1600px; } #on { position:absolute; clip:rect(0,0,0,0); } label { display:block; position:fixed; left:0; top:0; width:1em; height:1em; padding:0.2em; cursor:pointer; font-size:2em; text-align: center; line-height:1; color:#000; -webkit-transition:0.2s; transition:0.2s; } label:hover { color:maroon; } #on:checked { text-shadow:0 0 0.5em; } #on:checked ~ label { color:#fff; text-shadow: 0 0 0.1em, 0 0 0.2em, 0 0 0.3em, 0 0 0.4em; } .wrap { margin-left:3em; padding:2em 2em 10em 2em; background:rgba(0,0,0,0.2); color:saddlebrown; -webkit-transition:0.4s; transition:0.4s; -webkit-transform-origin: right top 0; transform-origin: right top 0; } .wrap h1{ color:maroon; } p { margin-bottom:3em; color:saddlebrown; } nav ul { margin:0 0 5em 0; padding:0; list-style:none; } nav li { margin:0; padding:0; } nav a:hover { background: rgba(0, 100, 0, 0.9); color: #0c0; } nav a { background: rgba(120, 74, 55, 0.9); color:pink; display: block; margin: 4px 0; padding: 0.8em 0; text-align: center; text-decoration: none; -webkit-transition:0.2s; transition:0.2s; } nav { display: block; margin: 3em 0 0; max-height: 90%; overflow-y: scroll; position: fixed; width: 50%; -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-transition:0.4s; transition:0.4s; } /*bの状態*/ #on:checked ~ nav { -webkit-transform:translateX(4%); transform:translateX(4%); } /*以下は.wrapが横にずれた状態の指定。上段が普通に横にスライドで下段が立体になる。*/ #on:checked ~ .wrap { /* -webkit-transform:translateX(50%); transform:translateX(50%); */ -webkit-transform:rotateY(-65deg); transform:rotateY(-65deg); }
アニメーションする為のcssは全部のcssの最後の2つだけです。以下↓
/*bの状態*/ #on:checked ~ nav { -webkit-transform:translateX(4%); transform:translateX(4%); } /*以下は.wrapが横にずれた状態の指定。上段(コメントアウト)が普通に横にスライドで下段が立体になる。*/ #on:checked ~ .wrap { /* -webkit-transform:translateX(50%); transform:translateX(50%); */ -webkit-transform:rotateY(-65deg); transform:rotateY(-65deg); }