- ベストアンサー
ウェブサイト：グローバルナビのドロップダウンメニュー作成について
mazimekko3の回答
- mazimekko3
- ベストアンサー率38% (74/194)
http://ezorisu-web.com/web-design/archives/356 に示されてるコードだと ul と li の ネスト構造が分かりづらいのだけれど, ul は li の子要素として出現する構造になる. 一段目 li に背景として画像を設定すると, background はデフォルト継承だから背景画像とか背景色は子要素の ul にもすべて適用される. 継承させたくないなら, 明示的に背景関連のプロパティを設定しないといけない. 具体的に何をすればよいかといえば, 二段目以降の li もしくは ul の background に継承をさせない指定をする. #menu-sample li li { background: 色とか; } 色しか指定しなくても, 親の background をすべて消す必要があるから background の指定が必要. idは最初に示してあるURLのコードにならっている.
関連するQ&A
- HTML ドロップダウンメニュー 教えてください！
ナビゲーションのドロップダウンメニューを作りたく、 ↓↓このサイトを流用し、こんな感じで、↓↓ http://ezorisu-web.com/web-design/archives/356 試行錯誤しています。 現在作っているサイトが、flashに重なって半透明の透過PNGのナビゲーションがあり、IE6でも半透明に見えるよう、ジャバスクリプトを使用しています。 ここで、ジャバスクリプトを使用しているのが原因かわかりませんが、ジャバスクリプトを使用したドロップダウンメニューをつくろうとするとPNGが半透明じゃなくなってしまいます。 そのため、現在、上のサイトを参考にCSSだけでのドロップダウンメニューを作っているのですが、上のサイトどおり作ると、IE6が、ドロップだうんしません。 何かいい方法はないでしょうか？？ ※↓ジャバスクリプトは↓ここからダウンロードしました。 http://monodez.com/create/pngfix.html
- ベストアンサー
- インターネットビジネス
- JavaScriptを使用する入れ子のドロップダウンメニューについて
仕事で、入れ子のドロップダウンメニューを作成することになりました。 入れ子でなく、通常のドロップダウンメニューを、 こちらのWebサイト↓ http://exyz.cocolog-nifty.com/good_sleep/2007/09/javascript_8131.html を拝見させて頂き、作成したのですが、 こちらの方法を応用して入れ子にしようとすると、 ドロップダウンメニューが使い物にならないものになってしまいます。 参考としては、こういったものを作りたいと考えています↓。 http://www.ebase.co.jp/solution/index.html こちらのWebサイトの、左側のメニューです。 カテゴリによって、２段になってます。 いろいろなサイトを調べてみましたが、 CSSによるものしか見当たらず、かつサンプルが、私のブラウザ(Sleipnir、IE)では見ることが出来ませんでした。 参考サイトのように、綺麗なドロップダウンメニューにするには、 一体どうしたらいいのでしょうか。 また、参考サイトは、親メニューの部分だけが画像で、 子メニュー部分は全てテキストになっていますが、 この、子メニューも画像で入れ子のドロップダウンメニューを 作成することは可能でしょうか？ 分かりにくい質問で申し訳ございません。 よろしくお願い致します。
- 締切済み
- JavaScript
- ドロップダウンメニューに関する質問。超初心者です。
ドロップダウンメニュー（親メニューだけgif画像で子メニューはcssで表示）を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。 親メニューは画像で、子メニューはcssで表示させたいと思います。 サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。 ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、 親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。 超超初心者の私にどなたかご教授願えないでしょうか。 よろしくお願い致します。m(_ _)m
- ベストアンサー
- JavaScript
- タブレットのドロップダウンメニューについて
会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。
- 締切済み
- JavaScript
- ドロップダウンメニューについて
javascriptのドロップダウンメニューの作成について質問させてください。 現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。 自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。 どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。 そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSのドロップダウンメニューが見出しで切れる
CSSでドロップダウンメニューを作りました。 ページの上部に横並びの状態です。 メニューを押すと下に4項目程度のリストが下がってきます。 今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。 <h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。 解決策はありますでしょうか。 宜しくお願い致します。
- ベストアンサー
- CSS
- ドロップダウンメニュー
このようなドロップダウンメニューを作りたいのですが、サンプル等、参考になるURLをご存知の方、よろしくお願いいたします。 http://www.adenin.com/EnterprisePortal.html それと、HPビルダーに使うことは可能でしょうか？
- 締切済み
- ホームページ作成ソフト
- CSSだけでアニメーション・ドロップダウンメニュー
CSSでアニメーション・ドロップダウンメニューを作りたいのですが http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/ ここを参考にしているのですが、 ホーム・会社案内・リクルート・お問い合わせ各ページがあるのですが 例えば、お問い合わせページを見ている時は そのページのボタンの背景が違うようにしたいのですが どうすればいいのでしょうか？ ご教授頂けたらありがたいです。
- 締切済み
- デザイナー・クリエイティブ職
- ドロップダウンメニューについて
JavascriptやJquoryを使わずにcssのみで、動きのあるドロップダウンメニューを作ることができました。 しかし、スマートフォンなどのタッチデバイスで動作確認をすると、メニューからサイドメニューが出っぱなしの状態になってしまい、引っ込んでくれません。 メニューの部分をクリックして開閉できるようにすればいいのでしょうか。やり方を教えて下さい。また、Javascriptを無効にしてる方でも問題なく使えるようにしたいです。
- 締切済み
- CSS
- ドロップダウンメニューのメニュー項目の外部管理方法
お世話になります。 http://jsajax.com/DropDownMenuArticle286.aspx 上記のサイトにあるドロップダウンメニューのサンプルはトップメニューは<li>タグ、ドロップダウンメニューは<div>タグで宣言するようになっているのですが、今回はサーバーがPHPとSSIが使えないのでincludeができないのです、そこでcssの外部ファイルにメニューデータを格納してそれを渡したいと思っているのですがそういった方法ってありませんか？
- 締切済み
- JavaScript
補足
ご回答ありがとうございます。 二段目以降にも画像が表示されてしまう件、二段目の背景画像を background-image:none; でリセットした後に設定し直す事で解決しました。 他にも多少問題がありましたが、継承関係を洗い直す事で解決しました。ありがとうございます。 質問に質問を重ねてしまう形になり恐縮ですが、もう一つよろしいでしょうか？ 質問文のとおり、一段目には http://www.1uphp.com/con2/over/over3.html を参考にロールオーバーを設定しているのですが、カーソルを二段目に移した瞬間に一段目がデフォルト状態に戻ってしまうのが少し気になりました。 カーソルが二段目に移った際にロールオーバー状態を維持し、一段目もしくは二段目から外れた際にデフォルトに戻す方法はあるのでしょうか。 もし何か方法があれば試したいと思います。よろしくお願いいたします。