jQueryドロワーメニューのバックグラウンドが丸になってるタイプのナビゲーションです。クリックイベントにjQueryを使用してます。jQuery最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。CSS3CSSのクラスを指定するだけで、画像にiPhoneXやMacBookなどの精密なフレームを付けられるCSSセット「devices.css」をご紹介します。アニメーションCSS3のキーフレームを使えばループアニメーションが簡単にできるようになります。今回はbackgroundにストライプ画像を設定してループさせてみます。CSS3Flexboxベースのグリッドシステムもいろいろで出てきている昨今でありますが、整理も兼ねて一度挑戦してみたいと思います。CSS3チェックボックスをCSSでカスタマイズしてカードタイプ風にしてみます。ついでにチェックした時のアニメーションも作ってみます。CSS3コンテンツがウィンドウの高さより少ない時だけ画面下にフッターを配置する方法はいろいろありますが、CSS3のFlexboxレイアウトを使用すればかなりスマートにできます。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。