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ランキング
-
読み込んだQRコードをフォーム...
-
特定の文字列を複数抜き出した...
-
var exports = exports || {}; ...
-
ローディングアニメーションの...
-
GASでチェックボックスを一括of...
-
追加ボタンを押した際に ok ボ...
-
①入力フォーム→②確認表示画面→③...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
React hooksが値を返して配列変...
-
初心者です。gulpでコンパイル...
-
ジャバスクリプトについて。
-
プログラムについて。
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
-
ボタンを押したあとに画像を表...
-
disabled プロパティが表示され...
-
出発駅A、到着駅Bを選択すると...
-
Colorboxがうまく設置できません
-
Cookieに保存されない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
アコーディオンメニューにする...
-
iText セル内での自動改行について
-
JS node.childNodesの仕様について
-
JTextAreaを改行コードを直接書...
-
jQuery UIのDroppableにて
-
ajaxで読み込んだDOMに対してin...
-
HTMLでのテキストエリアで入力...
-
Aタグのhrefの値を取得したいの...
-
jtreeのノードを右クリックで選...
-
プログラミング
-
(再質問)エクセルのマクロボ...
-
collection型を引数にしたファ...
-
mとnを入力 mからnまでを加算し...
-
汎用機のJCLの入門書ありま...
-
コンソール画面のクリアの方法
-
新しいパソコンのネット設定な...
-
ヘッダファイルimage.hとは?
-
Progateの入力画面で使えるショ...
-
cframeworkについて
-
シェルソートのフローチャート...
おすすめ情報