bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptコンテンツを押し出してナビゲーションを表示する「Navigation」JavaScript2018.05.9コンテンツを押し出してナビゲーションを表示する「Navigation」Navigationはコンテンツを押し出すかたちでナビゲーションを表示できるのが特徴です。ナビゲーションが横からグイッと出てきて、それに合わせてコンテンツが縮小されるとともに横に押し出されます。Navigation以下のページからNavigationの実際のデモやコードをチェックできます。Navigationデモでは、左上にハンバーガーメニューが設置されていて、ここをクリックするとナビゲーションが左から出現します。ハンバーガーメニューをクリックすると、コンテンツ部分が縮小して右側へ押し出されます。左側に生まれたスペースにナビゲーションメニューが表示されるという仕組みです。ナビゲーションの領域が広く確保されるのでとても見やすいですね。元に戻す場合は再度ハンバーガーメニューをクリックすればOKです。ナビゲーションは通常は隠れているのでその分コンテンツに集中しやすくなります。メニューにアクセスしたい時だけサッと表示させれるので、ジャマにならず快適にページを閲覧できますね。Controlを彷彿とさせるアニメーションだと思いました。いうわけで、コンテンツを押し出してできた領域にナビゲーションを表示できる「Navigation」の紹介でした。S...JavaScriptクリック時に周りに画像が表示されるイメージギャラリーを実装できるjQueryプラグイン「PopCir...PopCircleというjQueryプラグインを使えば、要素をクリック...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。