Javascriptを使用したドロップダウンメニューの隠し方とは？
- Javascriptを使用して階層式のナビゲーションをドロップダウンにする場合、マウスオーバーで表示する部分を隠す方法はありますか？現在、HTMLに隠す部分を含めて全て書いておき、一旦表示してからJavascriptで非表示にしています。しかし、この方法ではページ読み込み時に一瞬隠す部分が表示されてから消えます。CSSでdisplay:noneを使えば表示されませんが、SEOに悪影響を及ぼす可能性があります。隠す部分をHTMLに書かずに後からJavascriptで追加する方法も考えましたが、HTMLにメニュー部分が含まれないことになり、SEO上良くないと思います。他に良い方法はありますか？
- Javascriptを使用してドロップダウンメニューを作成する場合、マウスオーバーで表示する部分を隠す方法はありますか？現在、HTMLに隠す部分も含めて全て書いておき、Javascriptで非表示にしています。しかし、この方法ではページ読み込み時に一瞬隠す部分が表示されます。CSSのdisplay:noneを使えば表示されませんが、SEOに悪影響を及ぼす可能性があります。また、隠す部分をHTMLに書かずに後からJavascriptで追加する方法も考えましたが、HTMLにメニュー部分が含まれないため、SEO上は良くないと思います。他に良い方法はありますか？
- Javascriptを使ってドロップダウンメニューを作成する際に、マウスオーバーで表示する部分を隠す方法はありますか？現在はHTMLに隠す部分も含めて書いておき、Javascriptで非表示にしていますが、ページ読み込み時に一瞬隠す部分が表示されます。CSSでdisplay:noneを使えば表示されませんが、SEOに悪影響を及ぼす可能性があります。また、隠す部分をHTMLに書かずに後からJavascriptで追加する方法も考えましたが、HTMLにメニュー部分が含まれないため、SEO上良くないと思います。他に良い方法はありますか？
- ベストアンサー
Javascriptなどでドロップダウンさせる場合
例えば階層式のナビゲーションをJavascriptを使ってドロップダウンにする場合などに、マウスオーバーで表示する部分を隠す方法なのですが、 現在わたしはHTMLでは、隠す部分も含めて全て書いておいて、一旦表示してからJavascriptで非表示にしています。 そうするとページ読み込み時に一瞬隠す部分が表示されてから消えます。 はじめからCSSでdisplay:noneなりをすれば表示されませんが、その方法だとSEO上不安です。 隠す部分をHTMLには書かずに、あとからJavascriptで追加する方法も考えましたが、HTMLにメニュー部分が含まれないことになってしまうので、これもSEO上良くないと思います。 上記のほかに、良い方法は無いでしょうか？
- sr-ki
- お礼率68% (43/63)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞はじめからCSSでdisplay:noneなりをすれば表示されませんが、その方法だとSEO上不安です。 この考え方が間違ってますね。 そこは、素直にdisplay:noneで問題ありません。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
＞はじめからCSSでdisplay:noneなりをすれば表示されませんが、その方法だとSEO上不安です。 おそらくそのやり方ではSE的に有利にならない 無駄なので消すものはけして見せるものは見せた方がユーザビリティが高いと思います
関連するQ&A
- ドロップダウンメニュー
ドロップダウンメニューを作りました。普段はCSSで非表示にしてマウスオーバーするとJavascriptで表示するようにしています。 その表示するタグはDivタグでAbsolute指定しています。 その中はli（リスト）でdisplay:block;とwidth100%などをつけて余白もリンクにしました。 そのDivタグの領域の下には文字が書かれています（重ねている） で、そのかさなっている状態でそのDivタグの領域のリンクにマウスをあてるとポインタが文字選択のマーク（重なっている下の文字が選択される）になってしまうときがあります。この場合どのような解決方法がありますでしょうか？
- ベストアンサー
- HTML
- クリックすると目次をドロップダウン表示
http://www.kanzaki.com/docs/html/accessible.html このページのように、見出しの右をクリックすると目次をドロップダウン表示させるにはどうすればよいのですか？ CSSなのかJAVAなのかJavaScriptなのか分からなかったので、とりあえずHTMLカテゴリに書きこませていただきました。
- 締切済み
- HTML
- JavaScriptでドロップダウンリスト
下記ページのようなものを作りたいです。 ---------- http://www.resonate.co.jp/ 中段「Access」の部分の感じ ---------- これはFlashですが、確かJavaScriptでもできたと記憶しています。 が、その作り方を紹介しているページを探し出すことが出来ませんでした。 このようなドロップダウンリストはJavaScriptで出来ますか?また、出来るとした場合、その方法を紹介しているページがあれば教えてください。
- ベストアンサー
- JavaScript
- タブレットのドロップダウンメニューについて
会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。
- 締切済み
- JavaScript
- ドロップダウンメニューの開示情報を維持したい
最近JavaScriptをはじめた初心者です。 現在作成中のホームページで、インラインフレーム内に ドロップダウンメニューを使ってリンクを作っています。 <table name="mypop" style="～display:none">としているのですが、 リンク先でdisplay:noneが適用されてしまい、 リンク前に表示状態にしたはずのテーブルが非表示状態になってしまいます。 かといって、displayをとってしまうと必ず表示状態になってしまうので、 これも使えません。 表示非表示の情報をリンク先でも保持させられないのでしょうか？ 何か良い解決方法がありましたらよろしくお願いします。
- 締切済み
- JavaScript
- javascriptだけでドロップダウンリスト
あるサイトに行ったら、htmlでなく（？）javascriptだけでドロップダウンリストを表示し、リンクさせていました。つまり小さなボタンを押すと、リストが広がって表示されます。これは、ちょっと面倒なテクニックでしょうか？短いスクリプトで使えるなら是非知りたい。長いものならパス・・・。
- ベストアンサー
- JavaScript
- 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
- ドロップダウンメニューについて
JavascriptやJquoryを使わずにcssのみで、動きのあるドロップダウンメニューを作ることができました。 しかし、スマートフォンなどのタッチデバイスで動作確認をすると、メニューからサイドメニューが出っぱなしの状態になってしまい、引っ込んでくれません。 メニューの部分をクリックして開閉できるようにすればいいのでしょうか。やり方を教えて下さい。また、Javascriptを無効にしてる方でも問題なく使えるようにしたいです。
- 締切済み
- CSS
- ドロップダウンメニューについて
javascriptのドロップダウンメニューの作成について質問させてください。 現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。 自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。 どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。 そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 1枚の画像でナビゲーション＋ドロップダウンの設定
上記の通りになるのですが、 1枚の画像だけを用意して、ナビゲーションメニュー＋一部のメニューには プルダウンも設定したいのです。 例を言えば MENU1、MENU2、MENU3、MENU4という項目があり、 MENU1とMENU2は単純にマウスオーバーをした際に色が変わるという設定をし、 MENU3とMENU4にはマウスオーバーをした際にその下にそれぞれMENU3_1、MENU3_2、MENU4_1、MENU4_2 というメニュー階層を縦表示でつけられればと思っています（これにもマウスオンマウスオフ、アクティブ時で色変えしたい）。 単純にマウスオーバー時に変わる設定ならば CSSのhover設定とactive設定でいけるかと思っているのですが、 項目中2つだけドロップダウンを入れるとなるとペライチでどのように設定すれば いいのか……と悩んでおります。 また、もし普通のメニューは1枚画像で用意して、 ドロップダウンメニューの部分は別画像を用意して設定する、 というの方が簡単であるならばそちらの手法もご指摘いただければと思います。 サンプルとしてペライチで作成する場合の「こういう風の画像を用意して設定できればな」 という画像を添付させていただきます。（サンプルなので簡略に作成しております） 手法は特に指定しておりません。 分かりにくい説明で大変申し訳ございませんが、ご教授いただけますと幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- CSS
お礼
お礼が遅くなり申し訳ありません。 改めていろいろと調べてみましたが、このようなケースでdisplay:noneを使ってGoogleからペナルティーを受けてしまう可能性はゼロではない（これはGoogleにしかわからない）がほぼ大丈夫なようなので、素直にそうすることにしました。 ありがとうございました。