やってみたら、できた。今流行のドロワーメニュー。ハンバーガーマークを押したらニョキッと出てきてバッテンを押したらニョキッといなくなるやつです。ソースはたくさん落ちていて、それ使っても良かったんですが軽量にしたかったのと、あまり機能もいらなかったので自分で書いてみました。コンテンツ部分がグインっと動いたりしません。コンテンツにメニューがかぶさるだけです。ソースダウンロード(ZIP)※今回紹介するソースではWindowの右から出てきます。スクリプト使うのはこの10行。※jQueryを読み込んでおいてくださいね。・領域外をクリックでメニューを閉じるようにしました。・連打してもアニメーションしないようにしました。});三ボタンをクリックするとメニューが開き、三ボタンが×(classにpekeがつく)に変わります。×ボタンクリックすると×メニューが閉じ、×ボタンが三ボタン(classのpekeが削除される)に変わります。HTMLdrawrの中身はなんでもいいです。drawrの中に書いたものがニョキッと出てきます。href="#">メニュー5</a></li></ul></div>CSSここで必要なのは、下図のような画像を使ってメニューを開いていない時と開いている時でボタンの表示を変えること。drawr部分は最初にdisplay:noneを指定しておき、隠しておくことです。シンプルで設置しやすいドロワーメニュー、ありがとうございます。現在wordpressにて初めてモバイルテーマを作成しているのですが、フロントページ以外では、クリックしてもドロワーが開きません。フロントページではちゃんと動作するのですが...不躾で申し訳ありませんが、何か原因が考えられるでしょうか。AMすみません、自己解決いたしました。PMわざわざありがとうございます。返信が遅くなってしまい、申し訳ございません。解決したようで、安心しました。PMNARUGAROさんとてもわかりやすいスクリプトありがとうございます。これ、ページ内リンクでメニューをクリックした時に、ドロワーを閉じるにはどのようにしたらよいでしょう(;_;)いろいろ試したのですができなくて・・・よろしくお願い申し上げます。AMケン様コメントありがとうございます。function(){〜」を使用してください。function(){〜」を使用してください。PMちゃんなるさまシンプルなスクリプトとわかりやすい説明、どうもありがとうございます。活用させて頂きたいのですが、メニュー以外の領域をタップ、クリックしてドロワーを閉じるようにする方法をご教授頂けますでしょうか、どうぞ宜しくお願いいたします。PMしし丸様お返事が遅くなってしまってすみません。下記でイケルと思います!サンプルページも書き換えているので、参考にしてください。PM質問なのですが、ボタンを連打した際のアニメーションをストップしたいのですが、うまくできません。PMくに様スクリプトを改善してみました。AMすごくシンプルでぜひ実装させていただきたいと思いました。自分では書けないのでお願いしたいのですが、左から出てくるものも作っていただけたら嬉しいです。多階層になった場合はどんな動きになりますでしょうか?よろしくお願いいたします。様コメントありがとうございます。左から出てくるようにするには、cssの9行目と20行目の「right」を「left」に変更すれば可能だと思います。多階層は今のところ考えていません。PMちゃんなる様スクリプトありがとうございます。ドロワーボタン「三」をクリックし、ドロワーを表示。領域外をクリックしドロワーを非表示にした際、ボタンが「×」のままになっています。これを「三」に表示させる方法というものはないのでしょうか。PMちよじ様コメントありがとうございます。確かに、別領域をクリックして閉じた場合に「三」が「×」のままになっていましたね。ご指摘ありがとうございます。スクリプト下側の別領域クリックでメニューを閉じる部分に、「$(‘.btn’).removeClass(‘peke’);」を追記で対応可能です。PMHTMLとCSSを始めたばかりでJSは全くわかりませんが、このメニューを使いたいです。PMけんと様お返事が遅くなってすみません!メニューが多い場合は、スクリプトの2,3行目を削除すれば良いかもしれません。PMドロワーメニューのソースを利用して作っているのですが、メニュー項目が17行ほどあり、はみ出してしまいます。これは対応策無いでしょうか。PMお返事しておらず、申し訳ありません。scroll;」を追加してみてください。AMスマホ用に使いたいのですが、[三]や[×]の位置を変更するにはどうしたらよいのでしょうか?左端を0pxとすると横方向へ350px辺りがいいのですが...素人ですみません。上記の変更を試してみてください。AMこんにちは、お世話になります。・メニュー1・メニュー2・メニュー3~とメニュー群の頭に黒い”・”が表示されます。AM申し訳ありませんが、ダウンロードして頂いてそのまま使用される想定で提供していませんので、ご了承ください。「・」はhtmlの仕様ですので、CSSでスタイルを変更してご利用ください。ulタグ、liタグのlist-styleで変更できます。AMどのサイトに載ってるドロワーメニューも表示しているウィンドウ(ブラウザ)に対して位置が決まっているので、ブラウザ(ウィンドウ)の幅を変えると≡メニューの位置はウィンドウに対して固定なので、表示されているホームページ自体からしたら位置が変わってしまいます。それだと幅が決まっているホームページの場合変な位置に≡メニューがくることになります。この「やってみたら、できた。AMtableタグ内に合わせて...というのはお勧めしませんが、divタグの中にtableタグとdrawrメニューを入れて、divタグにcssでposition:relativeを設定すれば可能です。div(position:relative、横幅も設定)drawrtable〜divただ、ウィンドウ幅を極端に広げるような状況が一般的にはないと思うので、通常はウィンドウ幅に合わせるのが主流だと思いますが...。コメントをキャンセルメールアドレスが公開されることはありません。※サイト上に表示された文字を入力してください。(12)ちゃんなる山口県でWeb制作。クリエイティブハントというイベントをやったりしています。