【CSS】スマホサイトで、横にはみ出すメニューを作りたいのですが

jQuery mobileを使用しているサイトで、横にはみ出してメニューを設置したいのですが、調べても見つからなかったので実現する方法を教えていただけないでしょうか。

画像のアプリのようにタッチ操作で項目をスライドできるメニューにしたいと思っています。
よろしくお願いいたします。![イメージ説明]WIDTH:600

★追記★
![イメージ説明]WIDTH:600

行動規範の内容に同意します

回答1件

とりあえずタッチしてスライドできるだけのメニューであれば、以下の様にすれば出せるかと思います。
PCで見る時の事は考えてないですが。
概略としては、コンテンツ本体を抱える内側の枠・内側の枠をスクロールさせる枠・表示領域としてスクロールバーを隠す外枠、の３つで構成されています。

lang
1<html>
2<head>
3  <meta name="viewport" content="width=device-width">
4  <style>
5    * {
6      margin: 0;
7      padding: 0;
8    }
9
10    /* 表示領域の枠 */
11    .display_frame {
12      width: 100%;
13      height: 70px; /* 中に入る要素の縦幅に合わせる */
14      overflow: hidden; /* 表示領域外は隠す */
15    }
16
17    /* 中身をスクロールさせるための枠 */
18    .scroll_frame {
19      width: 100%;
20      height: 100px; /* outer_frameのheightより大きくする事で、スクロールバーを隠す */
21      overflow-x: scroll;
22    }
23
24    /* 中身の枠 */
25    .inner_frame {
26      width: 900px; /* 中に入る要素の横幅に合わせる */
27    }
28
29    /* 中身の要素 */
30    .inner_frame div {
31      float: left;
32      width: 300px;
33      height: 70px;
34    }
35  </style>
36</head>
37<body>
38  <div class="display_frame">
39    <div class="scroll_frame">
40      <div class="inner_frame">
41        <div style="background-color:pink">要素１</div>
42        <div style="background-color:cyan">要素２</div>
43        <div style="background-color:yellow">要素３</div>
44      </div>
45    </div>
46  </div>
47  <p>
48    ほげほげ
49  </p>
50</body>
51</html>