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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

CSS

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

Q&A

解決済

2回答

2879閲覧

jQueryでコンテンツをスライド表示させたい!

cotton88

総合スコア87

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2015/05/24 19:44

編集2015/05/24 19:55

こんにちは。

用意させていただいた画像のように、ボタンをクリックで隠れてるコンテンツをスライドで表示させるようにしたいです。
(説明が下手なので、画像を作成してみました)

巷にあるjQeryのプラグインではウィンドウの端を起点としてメニューやコンテンツがスライドしてくるものが多いのですが、今回は固定幅のコンテンツの右側を起点として表示させたいのです。

[開]ボタンを押すと #side エリアが、#wrap の右側を起点として、#contents にオーバーレイしてスライドするようなかたちです。

巷にある既存のカスタマイズすれば良いのでしょうが私にとってちょっと敷居が高いです。

初期(閉まってる状態)
![初期(閉まってる状態)]WIDTH:600

展開後(開いてる状態)
![イメージ説明]WIDTH:600

lang

1<div id="wrap"> 2 3<div id="contents"> 4コンテンツエリア 5</div><!-- /#contents --> 6 7<div id="side"> 8<p>サイドメニュー<p> 9<p><a href="#">開</a></p> 10 11<div class="box"> 12<div><img src="jpg" alt="">タイトル</div> 13<p>左画像に対してのテキスト左画像に対してのテキスト左画像に対してのテキスト</p> 14</div> 15 16<div class="box"> 17<div><img src="jpg" alt="">タイトル</div> 18<p>左画像に対してのテキスト左画像に対してのテキスト左画像に対してのテキスト</p> 19</div> 20 21<div class="box"> 22<div><img src="jpg" alt="">タイトル</div> 23<p>左画像に対してのテキスト左画像に対してのテキスト左画像に対してのテキスト</p> 24</div> 25 26</div><!-- /#side --> 27</div><!-- /#wrap -->

どうぞよろしくお願いいたします。
何か質問がございましたらお気軽にお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

ズバリ言っちゃうと、こうです。

lang

1body { background:#D3E0E4} 2#wrap { width:900px; margin:0 auto; position:relative; overflow:hidden; border:solid 1px #A0A0A0;} 3#contents { width:700px; background:#FFF; height:500px;} 4#side { position:absolute; top:0; right:-200px; width:400px; height:500px; background:#B25C5D;} 5#side a { display:block; text-align:center; width:30px; height:30px; border-radius:4px; background:#10B572;} 6.box img { float:left; width:180px; height:100px; margin:10px;}

lang

1 2<div id="wrap"> 3 4<div id="contents"> 5コンテンツエリア 6</div><!-- /#contents --> 7 8<div id="side"> 9<p>サイドメニュー<p> 10<p><a href="#">開</a></p> 11 12<div class="box"> 13<div><img src="jpg" alt="">タイトル</div> 14<p>左画像に対してのテキスト左画像に対してのテキスト左画像に対してのテキスト</p> 15</div> 16 17<div class="box"> 18<div><img src="jpg" alt="">タイトル</div> 19<p>左画像に対してのテキスト左画像に対してのテキスト左画像に対してのテキスト</p> 20</div> 21 22<div class="box"> 23<div><img src="jpg" alt="">タイトル</div> 24<p>左画像に対してのテキスト左画像に対してのテキスト左画像に対してのテキスト</p> 25</div> 26 27</div><!-- /#side --> 28</div><!-- /#wrap --> 29 30<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 31<script type="text/javascript"> 32$(function () { 33 var flg = false; 34 $('#side a').click( function(){ 35 if(flg==false){ 36 $('#side').animate({ right:0 }); 37 flg = true; 38 } else{ 39 $('#side').animate({ right:-200 }); 40 flg = false; 41 } 42 }) 43}); 44</script>

投稿2015/05/30 16:51

1000

総合スコア204

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

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

cotton88

2015/06/10 00:12

ずばりありがとうございます!
guest

0

#wrapにpsition:relativeを適用し、#sideにposition:absoluteを適用します。
その後、#sideにtopとrightを設定してできます。

コードが必要な場合にはコメントしてください。

投稿2015/05/25 00:11

orange0190

総合スコア1698

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

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

cotton88

2015/06/10 00:13

参考にさせていただきました。アドバイス、誠にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問