FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

Javascript jQuery

ドロワーメニューの「simple-sidebar」の簡単なサンプル

投稿日:

01

simple-sidebar

スマホなどの、ドロワーメニューの追加で便利な「simple-sidebar」。
サンプル通りに作っても、つまづいたので、備忘録代わりに簡単なサンプルを作りました。

作り方

今回のデモは下記から確認できます。

デモはこちら

2016013022422618024

JavaScript読み込み

ソースはGitHubの「simple-sidebar」の「download.zip」から、ダウンロードできます。

<head>部分に、jQueryとjQueryUI及び、ダウンロードしてきた 「jquery.simple-sidebar.min.js」を読み込みます。
今回は「js」フォルダ内に「jquery.simple-sidebar.min.js」を置いています。

HTML

HTML部分は以下の通り。

  • 「.header」が固定のヘッダー
  • 「.gNav」がスライドしてくるナビゲーション
  • 「.container」がコンテンツ部分

です。

CSS

CSSでは、ヘッダーの固定をしています。
今回は、「.header__btnMenu」が、メニューのボタンになります。

JavaScript

  • 「$(‘.gNav’)」で、スライドするナビゲーションを指定しています。
  • 「opener」は、スライドを作動させるためのボタンを指定します。今回は、「.header__btnMenu」です。
  • 「wrapper」はコンテンツ部分を指定します。今回は、「.container」です。
  • 今回は、右からナビゲーションをスライドさせたいので「align: ‘right’」を指定しています。右からスライドさせたい場合は、「align: ‘left’」を指定します。

デモはこちら

PR

PR

-Javascript, jQuery

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

jQuery

jQueryでスクロールするとヘッダーを固定させる

最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモ …

【簡単!】ページのアクセス時にモーダル(フロート)を表示するjQuery.layerBoard.js

「セール情報」や「重要なお知らせ」を、 モーダル(フロート)で目立たせたいという要望があったので、 ページのアクセス時にモーダル(フロート)を表示するjQueryプラグインを制作しました。

【新人向け】簡単にできた!Webサイトでよくみる技術のまとめ

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者で …

【CSS/JS】もっと目立たせて欲しいと言われた場合のTipsまとめ

キャンペーンサイトなど、動きをつけて、もっと目立たせて欲しいなどの要望を受けることは多いのではないでしょうか。言われて探すのは結構手間がかかったりします。見栄えする動きを中心にまとめました。 Phot …

Magnific PopupでYouTubeに関連動画を表示させない方法

Youtube の動画をLightboxのようなモーダルウィンドウで表示できるMagnific Popup。 レスポンシブ・デザインに対応しているので便利です。 Magnific Popup Magn …

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。