Qtaro「PageSlide」でスマホ用に横から”にゅっ”とスライドしてくるメニューを実装する方法(jQuery)TwitterFacebookGoogle+はてブ3PocketQtaroです。スマホ用のテーマにFacebookのアプリライクなスライドメニューを実装したのでメモ。縦長になりがちなスマホ向けのサイトも”ぐっ”と見やすくなります。※記事内のソースは必要な部分のみ抜粋しています。スポンサーリンクプラグインを公式サイトからダウンロードまずはダウンロード今回はjQueryプラグインの「PageSlide」を使用します。以下のページからダウンロード。PageSlideサーバへアップロードダウンロードした中から以下の3ファイルをサーバ上の任意のフォルダへアップロードします。WordPressの場合は利用中のテーマファイル直下に「css」「Js」といったフォルダを作成し、以下のようにアップします。↓カスタマイズ前の状態はこんな感じこれを横から”にゅっ”と出てくるようにカスタマイズします。プラグインとCSSの読み込みjQuery本体とプラグイン用のCSSを読み込みこみます。ソースは必ず””の前に書きます。end-->次に、実際にメニュー部分をスライドメニュー化させます。</script>スライドメニューを呼び出すリンクを用意するここまででメニューをスライドメニューするところまでできましたのでスライドメニューを呼び出すためのボタンを用意します。スライドメニューを包含したclass(今回で言う#sp_menu)をhrefで指定します。class="first">menu</a>これでスライドメニューを呼び出すボタン(リンク)が準備出来ました。右から”にゅっ”とでてきますね!!)CSSでスマホメニューっぽく仕上げますここまでで機能としては実装完了です。スマホ用のメニューボタンっぽくないので設置したリンクをCSSを調整して仕上げます。10px;}ついでにhtmlの方もちらっと変えてみます。先ほど設置したリンクの修正です。class="first">>></a>でこんな感じになりました。ボタンを押してみると。以上で実装は完了です!結構簡単にできるので、是非お試しください。2010年から4年間都内で会社員した後、2014年に地元秋田に戻りフリーランスに。秋田のローカルメディアCLOCKNOTE運営中。最近はLampというおでかけWebアプリ開発してます。2018.1.5【何ができるの?】5000円は安すぎ...。【1巻以降も意外と読めた!!】全部0円。最近落とした無料で読めるKindleマンガまとめWordPressテーマ「ALBATROSS」使用中このブログで利用中のレンタルサーバーWordPressをご利用の方で「ブログの表示が遅い」「管理画面が重い」とお悩みの方にはこのブログでも使用しているエックスサーバーがおすすめです。他のサーバーからの移転は以下のエントリーを参考にどうぞ。ZG」愛用中!MacをメインPCとして使い続けてきている管理人ですが、出来るだけお得に高性能なPCを手に入れるべくドスパラでWindowsの「ゲーミングPC」を購入しました。オンラインゲームを綺麗なグラフィックでサクサク快適にプレイしたい方はもちろん、一眼レフカメラで撮影したRAW現像や動画編集等の重たい作業にストレスを感じている方にもおすすめですよ。