jQueryを使用してアコーディオンメニューを作成しています。
イメージとしてはこのサイトのようにしたいと考えています。
http://inkd.com/
しかしながらこちらのソースをベースに作ってみているのですが
http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryi …
この方法で横に設置しようとすると、縦にアコーディオンするのに合わせて
コンテンツ全体が下がってしまう状況が生じています。
参考サイトのように、アコーディオンしてもメインコンテンツが動かない仕様に
したいのですがご教示頂けないでしょうか?
何卒よろしくお願いいたします。
No.1
- 回答日時:
position:absoluteかfloatで他の要素から切り離す。
その場合、z-indexで前面に持ってきておかないと、後出の要素が上にかぶさってしまいます。
この回答への補足
ご教示頂き誠にありがとうございます。
ここ数日間、参考にしているサイトのソースを見てみたところ
確かにz-indexの記述がありました。
ただ、この記述が多用されている作りになっていたため、いまいちソースを見ていてもピンとこなかったのですが、例えば、
<div>に<menu>というIDをつけて、そのmenuというIDに対してz-indexをcssで指定してあげるという理解でいいのでしょうか??
(そのmenuの中にプルダウンメニューを入れ込むいめーじです。)
お手数をおかけしますがご教示のほど、よろしくお願いいたします。
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で対応できたのですが、まだまだ課題は残っており、別スレッドを立てさせて頂きます。ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
都道府県穴埋めゲーム
都道府県の名前を1人1つずつ投稿してください。全ての都道府県が出たら締め切ります!
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
アコーディオンメニューがかくれてしまう。
HTML・CSS
-
アコーディオンで開かれたパネルの位置にスクロール
JavaScript
-
クリックすると上に開くアコーディオン
JavaScript
-
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
その要素がjQueryでremove()済...
-
初心者です。gulpでコンパイル...
-
二次元配列の中の各行の要素を...
-
【Google Apps Script】「ライ...
-
ローディングアニメーションの...
-
jQueryでシンセサイザーを作っ...
-
ジャバスクリプトについて。
-
jQueryローディングアニメーシ...
-
フォームが空欄の時にフォーム...
-
画面に表示したらアニメーショ...
-
画像の表示位置
-
jsで質問です。 ボタンが二つ存...
-
switch文のswitch(n)の部分を複...
-
セレクトボックスを2つ設けて選...
-
セレクトボックスを2つ選択して...
-
jsで、len~(__=C.value)]||val...
-
jQueryでのレスポンシブが綺麗...
-
追加ボタンを押した際に ok ボ...
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
鍵盤アプリで、スマホの画面に...
-
アコーディオンメニューにする...
-
iText セル内での自動改行について
-
Aタグのhrefの値を取得したいの...
-
JTreeのドラッグアンドドロップ...
-
或る文字列の文字数が一定数以...
-
jtreeのノードを右クリックで選...
-
JTextAreaを改行コードを直接書...
-
Listでintの最大値を超える要素...
-
javaがわかりません。。。
-
配列による二分木
-
innerTextは標準化されているの...
-
addEventListener の第三引数の...
-
(再質問)エクセルのマクロボ...
-
collection型を引数にしたファ...
-
汎用機のJCLの入門書ありま...
-
ヘッダファイルimage.hとは?
-
コンソール画面のクリアの方法
-
timeSetEventに対するtimeKillE...
-
Progateの入力画面で使えるショ...
おすすめ情報