タグ Off Canvas
人気順 5 users 50 users 100 users 500 users 1000 usersレスポンシブのうまいアイデア満載！RWD対応のナビゲーションを実装するスクリプトのまとめ | コリス
2015/05/07
105 users
コリス
jQuery
レスポンシブ
RWD対応
スクリプト
Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。 ※各キャプチャはAm I Responsiveを使用して作成しました。 Slidebars (jQueryのプラグイン) Slidebars -GitHub デモページ Off Canvasタイプのナビゲーション、左右どちらからで... 続きを読む
Bootstrapをカスタマイズ！ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas | コリス
2015/03/06
187 users
コリス
head
Bootstrap
Step
CSS
Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <l... 続きを読む
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars | コリス
2014/01/30
215 users
jQuery
コリス
head
jquery.js
Body
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link r... 続きを読む
時間をかけて見てほしい！デザインや仕掛けが素晴らしいウェブサイトのまとめ | コリス
2014/01/29
156 users
ノルウェー
細部
ナビゲーション
コリス
アイデア満載
今回はデザインの細部までこだわりを感じる、操作性が面白い、そんなアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 コンテンツファースト、Off Canvas、1ページ垂直スクロールがキーワードです。 また各サイト、ナビゲーションが非常に変わっていますが、初めてでも迷うことなく操作できると思います。ゆっくり時間かけて楽しんでください！ Amanda Gerhardsen ノルウェーの写... 続きを読む
[CSS]スクリプト無し、レスポンシブ用のナビゲーションを表示するちょっと素敵な7種類のアニメーション | コリス
2014/01/28
138 users
エフェクト
HTML
コリス
去年あたり
ベース
スタイルシートで実装するレスポンシブ用のナビゲーションを表示する7種類のアニメーションのエフェクトを紹介します。 コンテンツをスライドして横からナビゲーションを表示するOff Canvasのスタイルは、去年あたりから数多くのサイトで見かけるようになりましたね。 Pure CSS Responsive Nav HTML ベースとなるHTMLは、下記のようにシンプルです。 [html] One Two... 続きを読む