JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法 | UNORTHODOX WORKBOOK | Blog
Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログラムを組むのが一般的だと思いますが、以下の方法では、スクリプトを一切使わずにドロワーメニューを出したり隠したりしています。 タイトルで「アニメーションしながら」とありますけど、これについてはおまけみたいなもので、あくまでも「ドロワーが出現するきっかけをCSSでやる」がメインになります。なので、アニメーションについてはあまり触れていませんがご了承ください。一応、アニメーションも全てCSSだけでやっていまして、こちらのエントリーで紹介しているものを使用しています。 JSを利用しないドロワーメニュー まずは以下のデモをご覧ください。 JSを使用しないドロワーメニューのデモ デモ右
background-attachment: fixed がスマホで効かない問題は ::before で解決！
background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS Safari では、「background-size: cover」を使ってるとき「background-attachment:fixed」が効かないらしいんです。 出典：Can I use これを解決するためには、擬似要素「::before」で <body> の前に擬似ブロックレベル要素を作り、そこに背景画像を貼るのがイイみたい。自分なりに改良したソースコードをメモります。 height:100vh がベターか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
