• ベストアンサー

cssでのドロップダウンメニューについて

いつもお世話になっております。 すみません。。。 下記URLのテンプレートを使用して、かつ、ヘッダーのタブメニューに、プルダウンメニュー （タブにマウスオーバーすると、ドロップダウンでメニューが表示）を導入をこころみて いますが、どうしても、IE系（6,7,8）とFireFox系（３）で、表示が大幅にづれてしまいます。 なんとか、ドロップダウンのメニューのサンプルをご教示いただけませんでしょうか。 http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm

  • uff-n
  • お礼率54% (47/87)
  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

CSSのみ（スクリプトなし）という意味でしょうか？ スクリプトなしのものはそれほど多くはないみたいですが、検索すればそれなりに見つかります。 ざっと検索しただけなので、内容を確認していませんが一応の御参考までに。 （たまに、javascript利用が混ざっていたりしますがご容赦） ＜ＣＳＳ紹介 or 配布サイト＞ 　http://www.cssplay.co.uk/menus/final_drop.html 　http://coliss.com/articles/build-websites/operation/css/662.html 　http://www.cssplay.co.uk/menus/drop_examples.html 　http://www.cssplay.co.uk/menus/final_drop3.html 　http://coliss.com/articles/build-websites/operation/css/css-tutorial-pure-css-dropdown-menu-by-venturelab.html ＜作成方法解説付き＞ 　http://journal.mycom.co.jp/articles/2010/03/24/css/index.html 　http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/ 　http://www.htmldog.com/articles/suckerfish/dropdowns/ 　http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

uff-n
質問者

お礼

ありがとうございます！！ 助かります！！ こちらでもチャレンジしてみようと思いますが、 実は、CSSの編集をすると、どうしても、他へのレイアウトに影響がでてしまっている状況でして、 javascriptで実装できるものを検討したく思います。 javascriptでのドロップダウンなにか、ございませんでしょうか。

uff-n
質問者

補足

あと、もしできますならば、 http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm から、ドロップダウンメニューを適用し、IE/Firefox両方で動作するコードがあると 非常に助かります。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 ＞javascriptで実装できるものを検討したく思います。 javascriptのものは探さなくても沢山見つかる（んなことないけど）といってもよいほどありそうです。 ぐぐって見れば、様々なライブラリが見つかると思いますので、そのうちのきちんとしているものなら問題なくいけるのではないでしょうか？ 万一を考えれば、使っているクラス名などが重複していないものがよいかも。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ？？？ドロップダウンメニューが出ない！！！

    ドロップダウンメニュー http://allabout.co.jp/gm/gc/416557/ 最近、カテゴリーのタブからドロップダウンメニューが出ないので、このサイトを見る気が失せました。 皆さんはどうですか？ ※ マイページ のタブはドロップダウンメニューがでます。

  • WordPress＞ドロップダウンメニューの位置を

    WordPressの固定ページ上部にドロップダウンメニューを作りたいのですが。 画像の通り、カーソルをタブ1に合わせた時に タブ1から凄く離れた場所（ページ右端）に ドロップダウンメニューが表示されてしまっています。 これをタブ1の直下に持ってくる方法が知りたいです。 このタブ1とドロップダウンメニューを設定した管理画面の状態は 画像の通りです。 どこをどう直せばタブ1の真下にドロップダウンメニューを持ってくることができるのか、教えていただきたいです。 どうぞよろしくお願いいたします。

  • CSS ドロップダウンメニュー　ページごとに固定

    こんんちは。 cssでホームページ作成中なのですが、独習では解決できない点があり ご教授いただけたら幸いです！ 下記サイトのテンプレートをもとに、カーソルを合わせるとドロップダウンで 階層メニューが表示されるサイドメニューをつくりました。 http://www.webdlab.com/template/dropdownmenu2/ カーソルオンで反転＋階層メニューの表示はクリアできたのですが。。 各ページを開いたときに、現在表示されているページにあたる箇所は、 カーソルが離れても文字を反転させたまま、またその階層メニューも常に表示の状態にしたいのです。 テンプレートCSSにうまく加筆できればと思ったのですが、うまくいきません。 何か方法はないでしょうか。 どうぞよろしくお願いします！

    • 締切済み
    • CSS
  • ドロップダウンメニュー。

    個人でＨＰを運営しているのですが、 この度、フレーム機能とドロップダウンメニューを使用してページを製作しました。 ところが、メニューから項目を選んでクリックしてちゃんと表示されるのですが、クリックしても何も表示されない部分（メニューの中の最初の表示部分や、ｈｔｍなど設定されていない部分）も何故か、何にもない真っ白なページが表示されてしまいます。 ドロップダウンメニューのソースはサンプルから頂いてきて、自分なりに何とか形になったのですが、上記のトラブルを解消するほどの知識がありません。 何卒、ご教授お願いいたします。 http://www003.upp.so-net.ne.jp/tochio-cinema/cinema_review.htm の右上にあるドロップダウンメニューです。 メニューの中の　ＬＡＳＴ　ＵＰＤＡＴＥと、その下の6/26をクリックすると、下のフレームが真っ白になってしまいます。

    • ベストアンサー
    • HTML
  • WindowsXPライクなドロップダウンメニュー

    windows osのような プルダウンメニューをウェブページのナビゲーションとして再現したい です。 windows osのような プルダウンメニューとは ファイルメニュー -> 新規作成　というようなアレです。 特に欲しい機能としては、プルダウンメニューを表示している状態で メニュー外の部分をクリックすると、プルダウンメニューが 閉じるという動きです。 javascript プルダウンメニュー　で検索すると それらしいメニューのサンプルはでてきますが、 そういうのは見つかりませんでした。。 WindowsXPライクなドロップダウンメニューのADxMenuというツールを発見したのですが リンク先を見ると、webページがみれません。 このサイトは無くなってしまったのでしょうか。。 また代替ページか似たようなツールはないでしょうか。 意味不明でしたら加筆修正しますのでよろしくお願いします。

  • HTMLのドロップダウンメニュー背景を画像にする方法

    HTMLのドロップダウンメニュー（プルダウンメニュー）背景に画像を適用する方法はございますか？　宜しくお願いします。

  • CSSのみでのドロップダウンメニューについて

    下のサイトを参考にドロップダウンメニューを作成したのですが、 ドロップダウンで出てくるサブメニューにマウスを移動した際、一番上のメニューのhoverの効果が消えてしまい困っています。 どうすれば、サブメニューにマウスを移動しても一番上のメニューのhoverの効果を残せるようにできるのでしょうか？ 【参考にしたサイト】 http://weboook.blog22.fc2.com/blog-entry-359.html （このサイトでは綺麗に動いています。。） 【私のコード】 <!DOCTYPE html> <html> <head> <style type="text/css"> /** １階層目 **/ #menu { list-style-type: none; } #menu > li { position: relative; float: left; text-align: center; } #menu > li > a { display:inline-block; margin-left:20px; line-height: 1; } #menu > li > a:hover { background:lightpink; } /** ２階層目 **/ #menu > li > ul { position: absolute; top: 100%; left: 0; list-style-type: none; } #menu > li > ul > li { position: relative; overflow: hidden; height: 0; width: 200px; text-align:left; } #menu > li:hover > ul > li { overflow: visible; height:2em; } </style> </head> <body> <div> <ul id="menu"> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a> <ul> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> </ul> </li> </ul> </div> </body> </html> 宜しくお願い致します。

    • 締切済み
    • CSS
  • タブレットのドロップダウンメニューについて

    会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。

  • ドロップダウンメニュー

    http://www.microsoft.com/japan/ ↑のページの右上の方にある、マウスカーソルを持っていくとドロップダウンメニューが表示される方法を知りたいのですが、どなたか教えてもらえませんか？ JavaScriptで実現できるのかどうかも分かっていないので、もしかするとこのカテゴリへの投稿も間違っているかもしれませんが・・・。 宜しくお願いします。

  • ドロップダウンメニューの表示が隠れるのですが。

    ドロップダウンメニューでサブメニューがＦＬＡＳＨ動画の後ろに表示されてしまいます。 どこかソースの追記等で直るのでしょうか？ 今、ドロップダウンメニューを作っているのですが、 http://pkoko.sakura.ne.jp/test/index3.html ↑ＪＰＧ画像等を配置した場合はきちんと表示されるのですが、 http://pkoko.sakura.ne.jp/test/index2.html ↑画像をＦＬＡＳＨにすると、サブメニューがＦＬＡＳＨの後ろに隠れてしまいます。 どこかソースの追記等で直るのでしょうか？ http://pkoko.sakura.ne.jp/test/sos.html ↑今使っているソースはこれです。 知っている方がいたら回答お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する