人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページにドロップダウン機能を加えたいのですが、(マウスを合わせるとずらずらと出てくるやつ)私のホームページではxhtmlを使用しています。といいいますか、どのコードを使っていいのかわかりません。教えてください、よろしくお願いします。

●質問者: hirokinman22
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● うぃんど
ベストアンサー

マウスを乗せるだけで出てくるドロップダウンリストは
JAVAScriptでプログラムを作成する必要があり、
デザインによって様々なものがあります

下記はもっとも短い例です
http://jsajax.com/Articles/dropdownmenu/286

下記にはjQueryを使った例がいろいろ載ってます
http://www.designwalker.com/2009/02/jquery-dropdown.html
jQueryはJAVAScriptで作られたJAVAScriptのためのライブラリです
jQueryを使えばJAVAScriptでのホームページ操作が行いやすくなります


うぃんどさんのコメント
「リプレースできずにイントラネットの古い環境がいまだにゴロゴロあるので・・・」と言い訳しておきます(恥)

hirokinman22さんのコメント
ホーム、宿泊、レストラン・・・とメニューがありその中にシングル・ツイン・和室・スイートルームと入れたいのですが、直接のコードを教えていただけないでしょうか?よろしくお願いします。

hirokinman22さんのコメント
ご回答ありがとうございます、上記のURLを拝見したんですが、理解できませんでした・・。

うぃんどさんのコメント
ローカルで動かしただけで、Jimdoで動くかどうかはためしてませんが、 JAVAScriptを使わずにHTML+CSSで書くと下記のような具合です >|html| <style> #mymenu ul { display:block; list-style-type: none; margin:0; padding:2px; } #mymenu ul ul{ display:none; position:absolute; top:100%; left:0; } #mymenu ul ul ul { top:0; left:100%; } #mymenu li { width:6em; background:#8FBC8F; border:thin solid black; text-align:center; float:left; } #mymenu li li { clear:both; } #mymenu li:hover { position:relative; } #mymenu li:hover > ul { display: block } </style> <div id="mymenu"> <ul> <li><a href="#">ホーム</a> <li> <a href="#">宿泊</a> <ul> <li><a href="#">シングル</a></li> <li><a href="#">ツイン</a></li> <li> <a href="#">和室</a> <ul> <li><a href="#">露天風呂</a></li> <li><a href="#">ユニットバス</a></li> </ul> </li> <li><a href="#">スイート</a></li> </ul> </li> <li><a href="#">レストラン</a> <ul> <li> <a href="#">和食</a> <ul> <li><a href="#">すし</a></li> <li><a href="#">天ぷら</a></li> <li><a href="#">懐石</a></li> </ul> </li> <li><a href="#">中華</a></li> <li><a href="#">フレンチ</a></li> </ul> </li> </ul> </div> ||<

うぃんどさんのコメント
# の部分にはそれぞれのページのアドレスを入れます

hirokinman22さんのコメント
やっぱりダメでした(泣)手作りホームページで上のコードはしっかり表示されました!初心者なので形が不細工で本当ならJimdoでやりたかったのですが・・No.2さんのおかげで理解できました、今のところ怖いのでいじりたくありません。ご丁寧に、コードまで作っていただき本当にありがとうございます。また、素早い回答感謝いたします。

2 ● Cherenkov

javascriptを使わずともcssだけでも作れます。
(dropdown css javascriptなどでググればいくらでも見つかる)
ドロップダウンするcssメニューいろいろ - かちびと. net

まずは気に入ったデザインをコピペして遊んで、仕組みを知りたくなったらfirefox+firebugを使って調査するといいでしょう。


hirokinman22さんのコメント
ご回答ありがとうございます。私のホームページは直接の埋め込み式になっているんですが、ファイルをダウンロードする形式ではなく、ソースコードを教えていただけないでしょうか。ホームページはJimdoを利用しています。 御手数ですが、どうかよろしくお願いします。

Cherenkovさんのコメント
jimdoデフォルトのテーマでドロップダウンメニュー化が可能か検討したところ、サブメニューを格納している要素(.cc-tp-subnavigation1)が空なので無理でした。 >> ナビゲーションのドロップダウンメニュー機能を希望します。 - Jimdoコミュニティーフォーラム http://jimdo-forum.com/discussion/160/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E6%A9%9F%E8%83%BD%E3%82%92%E5%B8%8C%E6%9C%9B%E3%81%97%E3%81%BE%E3%81%99/p1 << >> ナビゲーションをドロップダウンメニューに変更する - Jimdo活用研究室 http://liyuanslab.jimdo.com/2010/05/29/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B/ << を読んだ上で再度確認してみたところ、「独自レイアウト」ではサブメニューが得られるので実現可能なようです。 「独自レイアウト」は編集メニュー - レイアウト - 独自レイアウト から。 Jimdoコミュニティーフォーラムで云われているように、今使っているテーマがサブメニュー化ができない場合は「独自レイアウト」で一から組むしかありません。 (サブメニュー化できるできないはソースコードを見ないとわからない)。 「ナビゲーションの編集」で設定する項目を無視して非表示(or改造)にしてオリジナルメニューを作って対応することもできますが健全ではないのでやめたほうがいいでしょう。

hirokinman22さんのコメント
なるほど、理解できました。Jimdoでは諦めます。独自レイアウト以外では設置できませんでした。私ひとりではJimdoフォーラムにあんなコメントがあったなんて気付くこともできませんでた。大変分かりやすく教えていただき、本当にありがとうございました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ