- 締切済み
CSSでグローバルナビゲーションメニューをつくりたい
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- chiki777
- ベストアンサー率42% (396/929)
対象がjavascriptが使える環境だけだったら、 javascriptを使ったらいいと思います。 javascriptが使えない環境なら、CSSで。 と、本で読んだことがあります。
- chiki777
- ベストアンサー率42% (396/929)
ブラウザによっては、javascriptを使用する必要があります。
お礼
回答ありがとうございます。 >ブラウザによっては、javascriptを使用する必要があります。 ということは、一般的にはCSSでやらない方がいいということでしょうか？
関連するQ&A
- CSSのcurrentを使ったグローバルナビゲーションの作り方
CSSのcurrentを使ったグローバルナビゲーションの作り方を教えてください。 以下のように二枚のつながった背景画像をロールオーバーさせるCSSのcurrentを使ったグローバルナビゲーションの作り方を教えてください。 画像URLと参考サイト http://www.kagaya.co.jp/images/menu_gNav.gif http://www.kagaya.co.jp/index.php
- ベストアンサー
- HTML
- グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教
グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教えてください。 個別ページ毎にactなどとクラスをいちいち割り振るのではなく、JavaScriptで、パッと一気に処理したいと考えています。 ネットを探し回って、「カレントページ」「マウスオーバー」それぞれに対応する記述は見つけたのですが、それらを組み合わせると期待通りの動作となりません。具体的には、カレントページで、グローバルメニューをマウスオーバーした際、マウスオーバー画像へ変わるまではよいのですが、マウスアウトした時点で、カレントではない、ノーマル画像へと変更されてしまいます。(リロードすると、カレントメニュー画像へと戻るのですが…) 「カレントページにいるときは、マウスオーバー画像を表示させずにカレントメニュー画像のままにしとく」 あるいは、 「カレントページでマウスアウトした際はカレントメニュー画像を、その他のページでマウスアウトした際はノーマルメニュー表示させる」ようにするためには、どうしたらよいでしょうか？ スクリプトそのものを教えていただけると一番有難いのですが、難しいようであれば、参考になるサイト等でも構いません。何らしかのヒントだけでも、誰かくださいー。
- ベストアンサー
- JavaScript
- CSSで画像を隠すとSEO的にNGですか？
通常時とマウスオーバー時の2枚の画像を使い、メニュー部分でCSSでロールオーバーを使っています。 この場合、マウスオーバー時に画像を読み込むため一瞬アイコンがちらつくようになるのを防ぐため、同じページにマウスオーバー時の画像を敷き詰め、display: noneで非表示にしています。 隠しテキストはSEO的にNGとわかりますが、隠し画像も同じ扱いなのでしょうか？ ちなみに隠している画像にはaltは付けていません。 個人サイトですが、できるだけSEOに問題ないようにしたいので、どうかご教示ください。 また2枚の画像を使ったCSSロールオーバーで、このチラつきを防ぐいい方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- 【CSS/HTML】ナビゲーションメニューについて
【CSS/HTML】ナビゲーションメニューについて http://pegoring.blog108.fc2.com/ ・ボタンたちをコンテンツの幅に合わせる方法（左並びからセンタリングへ）を教えてください。 ・ボタンにカーソルを合したとき（hover)にそのカーソルを合したときの高さと背景の高さが合いません。 ・そのコンテンツの時にボタンの要素（色や背景など）を変更する方法を教えてください。（たとえば、Homeならチプページにいるときだけ、そのボタンだけ背景を変えるなど） →Javascriptになるとおもいます。javascriptに詳しい方、こっちも教えていただけると幸いですorz。 画像を横幅いっぱいにrepeatさせて、中央にコンテンツを置くようにしたいんです。 オレンジの背景が横いっぱいに最後まで続き、ボタンはコンテンツの幅に揃えたいんです。 とにかく、リンクから実際に見てもらえば言いたいことのおおよそはつかんでいただけると思います。
- 締切済み
- HTML
- FLASHドロップダウン（？）メニュー
さきほど http://oshiete1.goo.ne.jp/kotaeru.php3?q=714572 で質問させていただいたのですが状況が変わったので再度質問させていただきます。 【★】というボタンにロールオーバーするとメニューが下記のように出てきて、さらにロールアウト（メニューも含む）するとメニューが戻るというようにしたいのです。 【★】 ↓ロールオーバー 【★】自己紹介 掲示板 【★】ボタンは画像１と画像２からなってます。 透明のレイヤーを入れればいいのかと思い、画像２にメニューのすべてが収まるように透明な四角を描いた所意図する動きになりました。 が！メニューのボタンが生きてこないのです。 あたりまえですが、透明の四角の下にボタンがあるので、ロールオーバーにならないのです。 逆にボタンの方を下に配置してしまうと、【★】からマウスが離れたとたんメニューが戻ってしまいます。 どのようにしたらいいのでしょうか？
- ベストアンサー
- グラフィックソフト
- javascriptで作ったロールオーバーがロールオーバーのままになってしまう
質問お願いします。 javascriptで作った画像二枚で表現するロールオーバーボタンの不具合についてです。 ieでの動作は問題なかったのですがsafari3.1.2とfirefox3.03では、 その作ったロールオーバーボタンをクリックして他のページに行き、 そしてブラウザに予め備わっている機能の戻るボタンで元のページに戻るとクリックしたロールオーバーボタンがマウスが重なっていないのにロールオーバーしたままの状態になってしまいます。 (その状態でもう一度ロールオーバーボタンにマウスを重ねると元に戻ります。) 流れを簡単に書かせていただきます。 <1.ロールオーバーボタンをクリックする> ↓ <2.他のページにリンクする> ↓ <3.リンク先のページでブラウザの戻るボタンをクリックする> ↓ <4.1のページに戻る> ↓ <5.1でクリックしたロールオーバーボタンがカーソルが触れていないのにロールオーバーした状態> ロールオーバーボタンを作る方法は二通り試したのですが、両方とも上に書いた通りの状態です。 <試した方法> 1.DreamweaberMXのビヘイビア機能で作成。 2.http://css-happylife.com/log/javascript/000157.shtmlこちらのページを参考にさせて頂いての作成。 この不具合の事を気にして色々なウェブサイトを見てみたのですが、やはりjavascriptで作っているであろうロールオーバーボタンは同じような状態のウェブサイトが、多数有りました。 この問題の解決策をご存じの方がいらっしゃいましたら、どうかご教授下さい。よろしくおねがいします。
- 締切済み
- その他（インターネット・Webサービス）
- CSS による画像を使ったロールオーバー
よろしくお願いします。 CSSを使って、画像のロールオーバーをしようとしています。 HTMLの構成としては、 タイトル画像（幅800px）の下に、CSSを使って作った ロールオーバーするメニューを横並びで配置したいと思っています。 http://edo-freiheit.sakura.ne.jp/eblog/2006/06/css_2.html のサイトを参考に（ほとんどまる写しですが）して、 作成してみたのですが、HTML全体を左寄せしても、中央寄せ してもロールオーバーしたメニューの項目の左側に隙間というか 余白が入ってしまい、上のタイトル画像とズレが生じててしまいます。 この余白をなくす方法がありましたらお教え下さい。
- ベストアンサー
- HTML
- FlashもしくはJavascriptを利用したナビゲーションメニュー
ホームページの作成でトップページに FlashもしくはJavascriptを使用してインパクトのあるナビゲーションを設置を検討しています。 現在考えているナビゲーションのイメージとしては ・メインの画像エリアと複数のボタンで構成 ・各ボタンにマウスオーバーすると画像エリアの画像を切り替え ・各ボタンをクリックすると任意のリンク先へジャンプ といった形です。 いろいろと探してみましたが一番イメージが近いものは以下のURLで使用されているフラッシュです。 http://www.intheroom.jp/ ここはメインの画像エリアが自動的に切り替わったり、画像の切り替えにエフェクトがかかりますがここまでは必要ないです。（あると尚よいですが・・） 以下で配布されているスクリプトもイメージに近いです。 http://jqueryglobe.com/labs/feature_list/ ここはマウスオーバーで画像が切り替わらず、クリックしても別のURLには飛ばない点が残念です・・・。 もし私のイメージに近い形で配布されている素材をご存じでしたら教えていただけないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- Flash
- cssでコーディングしたメニューの表示について
先日この質問コーナーで教えていただき xhtml+ccssでサイドメニューにロールオーバーを着けることに成功いたしました。 そこで、その場合 今いるページのサイドメニューを固定でハイライトすることは可能でしょうか。 というか、一般的には、ロールオーバーをCSSで設定した場合、このような固定でのハイライトをすることは必要ないのでしょうか。 初歩的な質問で恐縮です。 PS.css+xhmtl コーディング猛特訓中です。 どこか参考になるサイトがありましたらご教授願います。 このblogサイトは少しずつですが見てみました。 http://www.cssnite.jp/
- 締切済み
- その他([技術者向] コンピューター)
- CSSでのロールオーバー
CSSでのロールオーバーについての質問です。 通常時A ロールオーバーB クリック時C この３つの画像を使ってメニューをロールオーバーさせたいのですが、 クリック時に切り換えさせる術を知らず、困っております。 a:link,a:visited{background-image:url(通常時A); a:active,a:hover{background-image:url(ロールオーバーB); でロールオーバーさせることは出来たのですが、クリック（Onclick）時に画像を切り換えることは、CSSで可能なのでしょうか。 宜しく御願い致します。
- ベストアンサー
- HTML
お礼
>chikiki777さん ありがとうございます。 使い分けて使うのが最善ということですね。