横からスライドするドロワーメニューのjQueryプラグイン作りました。果報は寝て待ってられない!果報は寝て待ってられない!とあるWeb屋の技術と雑記の備忘録フォローするホームWeb横からスライドするドロワーメニューのjQueryプラグイン作りました。colors』の特設ページを作った際に横からスライドしてくるメニュー(ドロワーメニュー)を実装したくて自作で書いたjQueryをプラグイン化してみました。ドロワーメニューのプラグインって結構デザインとかHTMLの書き方に制限があるものが多かったので、いたってシンプルで且つCSSだけでカスタマイズも自由にできるものがあったら便利かなぁということで作ってみました。検証済みDownloadgithub※同梱しているdemoファイルに簡単な使い方を記載しています。関連記事PHPでHTML文書を解析するつい先日、すでに書かれたHTML文書から情報を引っ張ってっこなくちゃいけない事案が発生してしまいましたので、その方法をメモしておきます。これを見て「?」となった方へ。05:23すばらしいシンプルなスクリプトをありがとうございます。20:02はじめまして。プラグイン拝見させていただきました。このプラグイン使用させてもらっても良いでしょうか。22:03当ページを閲覧いただきありがとうございます!よろしければ是非お使いくださいませ^^まだまだ未完成なプラグインなので、不具合など何かありましたら教えていただけますと幸いです。13:00シンプルなドロワーメニューのプラグインを探していました!こちらの素敵なプラグイン、使用させていただきますm(__)mありがとうございます。00:18ご利用のご報告ありがとうございます!何か不具合など何かありましたら教えていただけますと幸いです。21:40こちらのプラグイン使わせて頂きました。思い通りの動作のものがやっと見つかりました。ありがとうございました。なにかわからないことがありましたらこちらから質問させていただいてもよろしいでしょうか?宜しくお願いします。21:10プラグインのご使用ありがとうございます!ご質問等ありましたらこちらのコメントでもお問い合わせフォームでもお気軽にご質問くださいませ。17:34素晴らしいプラグインをありがとうございます!シンプルで簡単に扱えて非常にいいプラグインだと思います。$(‘#slideMenu’).lastSidebarClose();を実行すればメニューが閉じるような。通常のリンクによる画面遷移ではなくJavascriptで動的にコンテンツを読み込んでいるので読み込みが終わったと同時にメニューを閉じたいのです。あと話はそれますが、デモページの記述はこちらで正しいのでしょうか。closeAfterfunction(){}ドロワーメニューが閉じる直前に実行されます。すると直後?でしょうか。間違っていたら申し訳ありません。19:22コメントをいただきありがとうございます!申し訳ありませんが、現状はボタンのクリック以外での閉じる機能は実装しておりません。少々無理くりなやり方ではありますが、トリガーの要素のクリックイベントをjsで発生させてあげれば、思うような処理は実装できそうな気がします。http://api.jquery.com/click/こちらの機能、今後のアップデートでの実装を検討させていただきますね。貴重なご意見、誠にありがとうございます!それとデモページの文言ですが、こちらは誤字でした...混乱させてしまい申し訳ありません。01:35こちらのプラグイン使わせて頂きました。助かりました!!ありがとうございます。ひとつお聞きしたいのですが、サイトを開くときや更新した時に、一瞬だけ隠れてるメニューが表示されてしまいます。17:08ご使用報告ありがとうございます!サイドバーの非表示処理をjs側で行っているため、scriptタグをbodyの終了タグの直前に書いた場合や低速回線の場合などにご指摘の挙動が発生してしまうかもしれません。指定してあげれば解消できるかと思います。このあたりも次回のアップデートの項目として検討させていただきますね...。行ったら無事解決できました。13:40初めまして。プラグイン使わせていただきました。質問なのですが、メニューのリンク先をページ内リンクに設定し、そこに飛ぶ際スムーズスクロールで滑らかにしたいのですが、そのような設定や追記方法がありましたらご教授いただけないでしょうか?初心者で恐縮ですが宜しくお願いいたします。14:17ご利用いただき、ありがとうございます!ページ内リンクの処理はドロワーメニューとはまったく別ですので、別途リンクの要素に対してクリックイベントを指定してあげる必要があります。14:59ご回答いただき有難うございます。「jQueryページ内スクロール」で検索してこちらのコードを追記したところ、スムーズスクロールにはなりましたが、メニューのボタンをクリックするとTOPに戻ってしまいます。こちらのプラグインとは無関係のところで大変申し訳ありませんが、何かアドバイスをいただけると幸いです。19:40載せていただいたコードですと「href属性に#が含まれるaタグ全て」に対してクリックイベントを登録していることになります。メニューボタンのhref属性も#になっているため、反応してしまっているのかと思われます。その場合は1行目のセレクターを指定している箇所を「href属性に#が含まれるaタグ全て」ではなく「id名〜〜の要素の中のaタグ」のような指定方法にすると、意図しない要素にまでイベントが掛かってしまう心配もなくなるかと思います。10:26返信いただき有難うございます。何度も申し訳ありません。見よう見まねでやってみたのですがどうしても上手くいきませんでした。低レベル過ぎて恥ずかしい限りですが今一度ご教授いただけると幸いです。13:05何度も申し訳ありません。こちらのコードで無事に解決いたしました。丁寧に解説いただきまして有難うございました。22:35お力になれて幸いです!さらに細かいところですが、その指定方法だとaタグ全てのhref属性に#lpが含まれるかを見に行くので、厳密に言えば処理が重くなってしまします。(体感では違いはわからない程度ではあるかもしれませんが...)なので、できれば「id名〜〜の要素の中のaタグ」のような指定が最良かと思います。-初心者とのことですが、今後もがんばってくださいませ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。まことゆったりした日々を送ってます。普段はフロントエンドエンジニア・Webデザイナーをしております。ブラウザで縮小表示すると小数点が出てくる?【ネタバレあり】『打ち上げ花火、下から見るか?横から見るか?』見てきました。横からスライドするドロワーメニューのjQueryプラグイン作りました。果報は寝て待ってられない!.。