[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック
レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。 スライドは単にそう見えるだけで、transformでサイドバーを変形させています。 滑らかなアニメーション、美しいグラデーション、スライドするにつれて透明度が変化するのも美しいですね。 サイドバーをアニメーションでスライドさせるデモ 実装 サイドバーをアニメーションでスライドさせるデモ 実際の動作は、デモでお楽しみください。 デスクトップサイズでも、スマホサイズでも期待通り。動作します。 ※CSS変数で実装されているため、IEでは動作しません。 実装 実装の仕組み アイコンはフォームのチェックボックスで実装されており、そのオン・オフをトグルにしてサイドバーを表示しています。 トグルの切り替え時のみJavaScriptが使用されており、それ以外はアニメー
![[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/53964eacab91455a44fbd61cad063b621fb7c445/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017030805.jpg)
プラグインを使わずにCSSとjQuery数行でできるドロワーナビ | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。 jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。 実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。 今回はプラグインを使わずに作るドロワーナビをご紹介いたします。 Table of contentsコンテンツとナビゲーションを用意開いている状態を作成するjQueryで制御するコンテンツとナビゲーションを用意まずはコンテンツとナビゲーションを用意します。 固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。 DEMO.コンテンツとナビゲーションを用意 <div id="page"> <!-- コンテンツ --
jQueryでナビゲーションに自動でclassを付与するプラグインを作ってみた | soplog(そぷログ)
TLでちょっと話題に上がったので作ってみました（大分出遅れ）。 グローバルナビやローカルナビの現在地に、自動で class を付与するプラグインです。 作ってはみたのですが、きっと規模がでかくなると例外がボコボコ出てくると思います。 例えばこのプラグインでは、 /about/company/index.html が現在地の場合、 /about/index.html /company/index.html どちらにも class が付与されてしまいます。 こういった例外に全て対応するのはとても面倒難しいので、本末転倒ですが、 システム側で対応することをおすすめします。 サンプル サンプル－ダウンロード ※サンプルはローカルでは正常に動作しません。環境に合わせて設定してください。 使用例 <script src="https://ajax.googleapis.com/ajax/libs/jq
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
