jQueryを使用してアコーディオンメニューを作成しています。
イメージとしてはこのサイトのようにしたいと考えています。
http://inkd.com/
しかしながらこちらのソースをベースに作ってみているのですが
http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryi …
この方法で横に設置しようとすると、縦にアコーディオンするのに合わせて
コンテンツ全体が下がってしまう状況が生じています。
参考サイトのように、アコーディオンしてもメインコンテンツが動かない仕様に
したいのですがご教示頂けないでしょうか?
何卒よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
jqeryでのサンプルは、そのまま使用しない場合は厄介ですね。
良く知ってなきゃ手が出せない。★<div>に<menu>というIDをつけて、そのmenuというIDに対してz-indexをcssで指定してあげるという理解でいいのでしょうか??
デザインのためにHTMLは書かない!!これ原則です。
要は、他の要素に影響させないためには、
・その要素をabsoluteで配置してしまう。
・・置き場所を他の要素をrelativeで下げておく
のが簡単でしょう。
CSSのみで行うほうが楽かもしれません。クリックではなくポインターが乗ることで開きます。
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
で[表示]→[スタイルシート]に進み、「横プルダウン」「横並びプルダウン2」「ページの最上部へ」「ヘッダーの下」が、その方法ですね。
色々と試行錯誤したのですが、確かにCSSでやる方が楽な部分はありますね。
なんとかz-indexで対応できたのですが、まだまだ課題は残っており、別スレッドを立てさせて頂きます。ありがとうございます。
No.1
- 回答日時:
position:absoluteかfloatで他の要素から切り離す。
その場合、z-indexで前面に持ってきておかないと、後出の要素が上にかぶさってしまいます。
この回答への補足
ご教示頂き誠にありがとうございます。
ここ数日間、参考にしているサイトのソースを見てみたところ
確かにz-indexの記述がありました。
ただ、この記述が多用されている作りになっていたため、いまいちソースを見ていてもピンとこなかったのですが、例えば、
<div>に<menu>というIDをつけて、そのmenuというIDに対してz-indexをcssで指定してあげるという理解でいいのでしょうか??
(そのmenuの中にプルダウンメニューを入れ込むいめーじです。)
お手数をおかけしますがご教示のほど、よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- DIY・エクステリア このアコーディオンを修理したいのですがこのネジを抜く方法がわかりません。教えてくださると嬉しいです。 2 2023/03/10 23:58
- 楽器・演奏 ピアノ譜でアコーディオンを弾く方法 3 2022/12/12 15:53
- YouTube YouTubeチャンネル 望月りんの研究室【フェルミ切り抜き】のBGM 1 2022/04/22 21:12
- 一戸建て この部品ありますか?補修はできますか? 2 2022/08/28 10:31
- JavaScript イラストレーター、縦中横のショートカットをスクリプトを使って作成する方法 1 2023/04/19 11:15
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- WordPress(ワードプレス) ワードプレスのパーマリンク設定について 1 2023/02/11 19:08
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでシンセサイザーを作っ...
-
switch文のswitch(n)の部分を複...
-
セレクトボックスを2つ選択して...
-
①入力フォーム→②確認表示画面→③...
-
追加ボタンを押した際に ok ボ...
-
二次元配列の全要素の全要素を...
-
【GAS】WEBアプリでハイパーリ...
-
【Google Apps Script】「ライ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
iText セル内での自動改行について
-
アコーディオンメニューにする...
-
【jQuery】MixltUPの複数フィル...
-
或る文字列の文字数が一定数以...
-
Aタグのhrefの値を取得したいの...
-
こんばんは。 メガメニューを今...
-
URL+URN=URI と習ったのですが...
-
2つのXMLファイルを読み込む
-
Nivo Sliderのカスタマイズにつ...
-
Listでintの最大値を超える要素...
-
JTextAreaを改行コードを直接書...
-
配列による二分木
-
Firefox にて appendChild での...
-
イベントリスナの削除
-
既存のXMLを別のXMLの要素とし...
-
jQueryについて
-
jtreeのノードを右クリックで選...
-
ajaxで読み込んだDOMに対してin...
-
(再質問)エクセルのマクロボ...
-
collection型を引数にしたファ...
おすすめ情報