hirokinman22回答ポイントなし

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

ログインして回答する

ベストアンサー

うぃんど2012/01/31 02:24:38

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

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

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

スター

6件のコメントを見る
うぃんど 2012/01/31 14:23:50

「リプレースできずにイントラネットの古い環境がいまだにゴロゴロあるので・・・」と言い訳しておきます（恥）

スター
hirokinman22 2012/01/31 15:17:44

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

スター
hirokinman22 2012/01/31 15:18:49

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

スター

うぃんど 2012/01/31 16:52:12

ローカルで動かしただけで、Jimdoで動くかどうかはためしてませんが、
JAVAScriptを使わずにHTML+CSSで書くと下記のような具合です

    <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>

スター

うぃんど 2012/01/31 16:54:07

# の部分にはそれぞれのページのアドレスを入れます

 スター
hirokinman22 2012/02/01 00:35:24

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

スター

その他の回答

Cherenkov2012/01/31 04:42:07

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

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

スター
- 3件のコメントを見る
- hirokinman22 2012/01/31 14:33:40
  
  ご回答ありがとうございます。私のホームページは直接の埋め込み式になっているんですが、ファイルをダウンロードする形式ではなく、ソースコードを教えていただけないでしょうか。ホームページはJimdoを利用しています。
  御手数ですが、どうかよろしくお願いします。
  
  スター
- Cherenkov 2012/01/31 19:23:17
  
  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 2012/02/01 00:19:00
  
  なるほど、理解できました。Jimdoでは諦めます。独自レイアウト以外では設置できませんでした。私ひとりではJimdoフォーラムにあんなコメントがあったなんて気付くこともできませんでた。大変分かりやすく教えていただき、本当にありがとうございました！
  
  スター

ベストアンサー

うぃんど2012/01/31 02:24:38

うぃんど 2012/01/31 14:23:50

hirokinman22 2012/01/31 15:17:44

hirokinman22 2012/01/31 15:18:49

うぃんど 2012/01/31 16:52:12

うぃんど 2012/01/31 16:54:07

hirokinman22 2012/02/01 00:35:24

その他の回答

Cherenkov2012/01/31 04:42:07

hirokinman22 2012/01/31 14:33:40

Cherenkov 2012/01/31 19:23:17

hirokinman22 2012/02/01 00:19:00

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版