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

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

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

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

CSS

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

Q&A

解決済

2回答

4646閲覧

[変動する要素(アコーディオンメニュー)の下に要素を追加する方法]

star24star

総合スコア115

JavaScript

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

CSS

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

0グッド

0クリップ

投稿2016/01/13 06:38

<div id="menu"> <!-- アコーディオンメニューのような常に変動する要素 --> </div> <div id="menu"> <img src="photo.png"> </div>

上記のような要素が合ったとして、
常にメニューの下にある写真がメニューの変動に自動で合わせてくれるようにするには
どうしたらいいでしょうか?

現在
・CSSでメニューの配置を左上にくるよう固定している
・アコーディオンメニューと写真がCSSに習い被ってしまう
・アコーディオンの下に写真を配置したい
・写真の位置を固定させずアコーディオンメニューの動作に適応して写真も下へ変動してほしい

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

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

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

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

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

juny

2016/01/13 07:28

該当部分のCSSを開示してください。
star24star

2016/01/13 07:32

ここでは簡単なものに置き換えているのですが、 テンプレートを使用しているため該当部分のCSSを見つけるのは難しいようです
guest

回答2

0

ベストアンサー

CSSのレイアウト的な問題でしょうか?
下記みたいなクリックで開くメニューの下に画像を配置しても
メニューの上に画像はかぶったりはしないようですが。

<!DOCTYPE html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".mnHeader").on("click", function(){ $("nav ul li").slideToggle(); }); }); </script> <style> .mnHeader{ width:300px; padding:8px 10px; font-size:18px; color:#333; text-align: center; border :1px solid #ccc; font-weight: bold; color:#232323; margin-left:40px; -webkit-margin-after: 0 !important; cursor:pointer; } nav ul{ width:300px; -webkit-margin-before: 0 !important; -webkit-margin-after: 0 !important; } nav ul li{ display:none; -webkit-margin-before: 0 !important; padding:8px 10px; background-color: #62c4bb; color:#FFF; font-weight: bold; width:100%; text-align: center; border-bottom:1px solid #fff; } div{ width:322px; background-color: #ccc; margin-left:40px; } div img{ display: block; margin:0 auto; padding:10px; width:80%; } </style> </head> <body> <nav> <p class="mnHeader">Menu List</p> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> <li>menu5</li> <li>menu6</li> <li>menu7</li> </ul> </nav> <div><img src="https://cdn.teratail.com/img/common/login/imglogoLogin_white.png?1452663348"></div> </body> </html>

投稿2016/01/13 07:31

miyatayumi

総合スコア25

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

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

star24star

2016/01/14 08:54 編集

codeの提示有難うございます。確かに重なりませんね…。 今後の参考にさせていただきます!
guest

0

人によって様々だと思うので、参考までに。

初見で自分が考えた方法は、
アコーディオンメニューのクリックイベントで「クリックして開いたメニューと閉じてるメニュー合わせたアコーディオン全体の高さを取得」して、「取得した値を画像(もしくはdiv)のスタイルに適用させる」でいかがでしょうか?

(CSS記述が分からないので、アレですが・・・)
値をmargin-topかposition(top)に入れてあげれば、動くかなぁと思います。

投稿2016/01/13 07:10

編集2016/01/13 07:11
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

star24star

2016/01/13 08:33

高さを取得について調べてみました。 [$('divName').height()] 全体の高さ取得が実行できませんでしたがmargin-topとpositionでメニューの 重なりは抑えることができました。 しかしcontent部分がメニューの下に配置されてしまうようで戦い中。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問