質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1390閲覧

スマホ用ドロワー作成

kenkbou

総合スコア151

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/06/06 15:55

現在スマホサイトを設計しており、ドロワーにどのプラグインを使用しようか迷っております。

http://git.blivesta.com/drawer/

こちらのサイトのものが動きも見た目もかっこよくて使いたかったのですが、
少し煩雑なコードになるとドロワーがスクロール出来なくなるという問題に直面しております。

http://on-ze.com/demo/jquery-drawer/

こちらのサイトのように通常であればドロワー内でスクロールが可能です。

html

1<body class="drawer drawer--left"> 2 <header role="banner"> 3 <button type="button" class="drawer-toggle drawer-hamburger"> 4 <span class="sr-only">toggle navigation</span> 5 <span class="drawer-hamburger-icon"></span> 6 </button> 7 <nav class="drawer-nav" role="navigation"> 8 <ul class="drawer-menu"> 9 <li><a class="drawer-brand" href="#">Brand</a></li> 10 <li><a class="drawer-menu-item" href="#">Nav1</a></li> 11 <li><a class="drawer-menu-item" href="#">Nav2</a></li> 12 </ul> 13 </nav> 14 </header> 15 <main role="main"> 16 <!-- コンテンツ --> 17 </main> 18</body>

しかし、
<div class="content">Hello</div>』を追加

html

1<body class="drawer drawer--left"> 2 <header role="banner"> 3 <button type="button" class="drawer-toggle drawer-hamburger"> 4 <span class="sr-only">toggle navigation</span> 5 <span class="drawer-hamburger-icon"></span> 6 </button> 7 <nav class="drawer-nav" role="navigation"> 8 <ul class="drawer-menu"> 9 <li><a class="drawer-brand" href="#">Brand</a></li> 10 <li><a class="drawer-menu-item" href="#">Nav1</a></li> 11 <li><a class="drawer-menu-item" href="#">Nav2</a></li> 12 </ul> 13 <div class="content">Hello</div> 14 </nav> 15 </header> 16 <main role="main"> 17 <!-- コンテンツ --> 18 </main> 19</body>

このようにdivをひとつ追加するとドロワー内スクロールが出来なくなってしまいます。

このプラグインをご存知の方で何か良い対処方法はありますでしょうか?
もしくは、少しリッチなドロワーを作れるようなプラグインなどがあれば教えていただけると助かります。

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これなら問題なさそうですが、どうでしょう。

HTML

1<ul class="drawer-menu"> 2 <li><a class="drawer-brand" href="#">Brand</a></li> 3 <li><a class="drawer-menu-item" href="#">Nav1</a></li> 4 <li><a class="drawer-menu-item" href="#">Nav2</a></li> 5 <li><div class="content">Hello</div></li> 6</ul>

追記:

コメントで書いたコードです。

HTML

1<nav class="drawer-nav"> 2<ul class="drawer-menu"> 3<li><a class="drawer-brand" href="#">Brand</a></li> 4<li><div class="content">Hello</div></li> 5</ul> 6</nav>

JavaScript

1$( '.drawer-brand' ).click( function( e ) { 2 e.stopPropagation(); 3 $( '.content' ).html( 'content!!!!!!!!!!!!!' ); 4 return false; 5});

投稿2016/06/06 16:17

編集2016/06/06 16:38
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kenkbou

2016/06/06 16:28

早速ありがとうございます。 おお〜これは素晴らしいです、ありがとうございます。 わがままを言って恐縮なのですが、 例えばliの上の4つをtabにして下の4つをコンテンツにする、みたいのをしたいとき、 ulを2つ書いてしまうとダメなんですよね・・・ もし何か良いアイデアがあれば教えていただきたいです><
kei344

2016/06/06 16:38 編集

> liの上の4つをtabにして .drawer-brand にクリックイベントを付けて .content を書き換えたら良いのでは? 本文に追記しました。
kenkbou

2016/06/06 17:16

ありがとうございます。 何を複雑に考えていたのか、非常にシンプルでした。 とても勉強になりました、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問