質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

マウスオーバーしたときに真横にドリルダウンさせる方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,744

score 39

よくあるECサイトのグローバルナビの真横にドリルダウンさせるにはどのように実装すればよいでしょうか。

現状は下記のように「カテゴリ一覧」をマウスオーバーすると、
下にカテゴリが出てくるようになっているのですが、
さらにそのカテゴリをマウスオーバーさせると右横にサブカテゴリ―を表示させたいです。

詳しいかた、
ご教示頂きますと幸いです。
宜しくお願い致します。

★js
$('.submenu-trigger').hover(function() {
    $(this).children('.submenu').show();
}, function() {
    $(this).children('.submenu').hide();
});

★jsp

<ul>
    <li class="submenu-trigger">カテゴリ一覧</li>
    <li>カテゴリ①</li>
    <li>カテゴリ②</li>
    <li>カテゴリ③</li>
    <li>カテゴリ④</li>
    <li>カテゴリ⑤</li>
    <li>カテゴリ⑥</li>
    <li>カテゴリ⑦</li>
    <li>カテゴリ⑧</li>
</ul>

★参考★
楽天:http://www.rakuten.co.jp/
プレミアムバンダイ:http://p-bandai.jp/
ロハコ:http://lohaco.jp/
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

Javascriptを使わなくてもCSSだけでできそうですね。
サンプルを作りましたので、参考にどうぞ。
それと、リスト要素は入れ子にして階層をつけたほうがよいと思います。

追記:
コメントを受けてコードを修正しました。
こちらでも確認できます。
https://jsbin.com/dudaniduma/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body{
      font-size:13px;
    }
    
    .submenu-trigger{
      position:relative;
      width:120px;
      line-height:20px; /* line-heightで高さを固定します。この設定は子孫要素全てに継承されます。(継承されると都合が悪い場合はheightでの指定でもOKですが、その場合は各liそれぞれに指定してください) */
    }
    .submenu-trigger > ul,
    .submenu2-trigger > ul{
      display:none;
    }
    .submenu-trigger:hover > ul,
    .submenu2-trigger:hover > ul{
      display:block;
    }
    .submenu-trigger > ul{
      background-color:#ddd;
    }
    .submenu2-trigger > ul{
      position:absolute;
      left:120px;
      top:20px;
      background-color:#aaa;
      min-height:160px; /* 20pxの8個分で160pxを指定します。(サブカテゴリの数がカテゴリの数より多くなる可能性がなければheightでもOK) */
      width:120px;
    }
  </style>
</head>
<body>
  <ul>
    <li class="submenu-trigger">カテゴリ一覧
      <ul>
        <li class="submenu2-trigger">カテゴリ1
          <ul>
            <li>サブカテゴリ1-1</li>
            <li>サブカテゴリ1-2</li>
            <li>サブカテゴリ1-3</li>
          </ul>
        </li>
        <li class="submenu2-trigger">カテゴリ2
          <ul>
            <li>サブカテゴリ2-1</li>
            <li>サブカテゴリ2-2</li>
            <li>サブカテゴリ2-3</li>
          </ul>
        </li>
        <li class="submenu2-trigger">カテゴリ3
          <ul>
            <li>サブカテゴリ3-1</li>
            <li>サブカテゴリ3-2</li>
            <li>サブカテゴリ3-3</li>
          </ul>
        </li>
        <li class="submenu2-trigger">カテゴリ4
          <ul>
            <li>サブカテゴリ4-1</li>
            <li>サブカテゴリ4-2</li>
            <li>サブカテゴリ4-3</li>
          </ul>
        </li>
        <li class="submenu2-trigger">カテゴリ5
          <ul>
            <li>サブカテゴリ5-1</li>
            <li>サブカテゴリ5-2</li>
            <li>サブカテゴリ5-3</li>
          </ul>
        </li>
        <li class="submenu2-trigger">カテゴリ6
          <ul>
            <li>サブカテゴリ6-1</li>
            <li>サブカテゴリ6-2</li>
            <li>サブカテゴリ6-3</li>
          </ul>
        </li>
        <li class="submenu2-trigger">カテゴリ7
          <ul>
            <li>サブカテゴリ7-1</li>
            <li>サブカテゴリ7-2</li>
            <li>サブカテゴリ7-3</li>
          </ul>
        </li>
        <li class="submenu2-trigger">カテゴリ8
          <ul>
            <li>サブカテゴリ8-1</li>
            <li>サブカテゴリ8-2</li>
            <li>サブカテゴリ8-3</li>
          </ul></li>
        </ul>
    </li>
  </ul>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/11 17:20 編集

    回答頂きましてありがとうございます。実装しました。
    新たに問題点が発生しましたので、追記します。

    ■問題点
    カテゴリの数が多くて、サブカテゴリの数が少ないとサブカテゴリが表示されているところへマウスをもっていけない。非表示になる。

    ex) カテゴリ数が7で、7番目のカテゴリのサブカテゴリ数が3だとすると、
      「position:absolute;」になっているので、サブカテゴリは1番目のカテゴリの
      真横に3段まで表示される。
      よって、7番目のカテゴリまでマウスオーバーした後、真横にサブカテゴリが表示されていないので、マウスが離れると非表示になりサブカテゴリをクリックできない。

    上記どのように解消すればよいでしょうか。

    「カテゴリの順番よりサブカテゴリ数が少ない場合はカテゴリの真横にサブカテゴリを表示する」ようにしたいのですが、どのように実装すればよいかわかりません。

    「position:absolute;」を「position:relative;」に変更しても見た目が汚く出てしまいます。

    ご教示頂けると幸いです。

    キャンセル

  • 2015/08/14 11:16

    「カテゴリの順番よりサブカテゴリ数が少ない場合はカテゴリの真横にサブカテゴリを表示する」のはサブカテゴリの位置が上下するので、見た目的にあまりよくないと思います。

    参考サイトで貼られている楽天やプレミアムバンダイのようにサブカテゴリの高さをカテゴリの高さと同じにしておくのがよいと思います。

    サンプルを修正しましたので、参考にしてください。
    サンプルのように各メニューの高さをline-heightで固定し、サブカテゴリ全体をmin-heightで固定してはどうでしょうか。

    キャンセル

  • 2015/08/14 19:00

    迅速な対応頂きましてありがとうございます。
    解決しました。深謝です。m(_ _)m

    キャンセル

0

カテゴリ①〜⑧の右にサブカテゴリーが出てくるってことですよね?
でしたら、各カテゴリに入れ子でリストを作りそれをpositionの絶対配置で右側に表示させればよろしいかと

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

こんにちは!
このような感じのメニューを作成したいという認識ですがいかがでしょうか。

http://getbootstrap.com/javascript/#dropdowns
ご参考になればと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る