アコーディオンメニューにすると下部がずれます。

質問

jQueryを使用してアコーディオンメニューを作成しています。
イメージとしてはこのサイトのようにしたいと考えています。
http://inkd.com/

しかしながらこちらのソースをベースに作ってみているのですが
http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryintro/accordion.html

この方法で横に設置しようとすると、縦にアコーディオンするのに合わせて
コンテンツ全体が下がってしまう状況が生じています。

参考サイトのように、アコーディオンしてもメインコンテンツが動かない仕様に
したいのですがご教示頂けないでしょうか？
何卒よろしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

jqeryでのサンプルは、そのまま使用しない場合は厄介ですね。良く知ってなきゃ手が出せない。
★<div>に<menu>というIDをつけて、そのmenuというIDに対してz-indexをcssで指定してあげるという理解でいいのでしょうか？？
　デザインのためにHTMLは書かない!!これ原則です。
　要は、他の要素に影響させないためには、
・その要素をabsoluteで配置してしまう。
　　　・・置き場所を他の要素をrelativeで下げておく
のが簡単でしょう。　

　CSSのみで行うほうが楽かもしれません。クリックではなくポインターが乗ることで開きます。
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　で[表示]→[スタイルシート]に進み、「横プルダウン」「横並びプルダウン2」「ページの最上部へ」「ヘッダーの下」が、その方法ですね。

お礼

色々と試行錯誤したのですが、確かにCSSでやる方が楽な部分はありますね。
なんとかz-indexで対応できたのですが、まだまだ課題は残っており、別スレッドを立てさせて頂きます。ありがとうございます。

回答No.1

ORUKA1951

position:absoluteかfloatで他の要素から切り離す。
その場合、z-indexで前面に持ってきておかないと、後出の要素が上にかぶさってしまいます。

補足

ご教示頂き誠にありがとうございます。
ここ数日間、参考にしているサイトのソースを見てみたところ
確かにz-indexの記述がありました。

ただ、この記述が多用されている作りになっていたため、いまいちソースを見ていてもピンとこなかったのですが、例えば、
<div>に<menu>というIDをつけて、そのmenuというIDに対してz-indexをcssで指定してあげるという理解でいいのでしょうか？？
（そのmenuの中にプルダウンメニューを入れ込むいめーじです。）

お手数をおかけしますがご教示のほど、よろしくお願いいたします。