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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3347閲覧

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

mucho0623

総合スコア31

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2015/07/17 08:42

編集2015/08/13 03:05

よくある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/

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body{ 8 font-size:13px; 9 } 10 11 .submenu-trigger{ 12 position:relative; 13 width:120px; 14 line-height:20px; /* line-heightで高さを固定します。この設定は子孫要素全てに継承されます。(継承されると都合が悪い場合はheightでの指定でもOKですが、その場合は各liそれぞれに指定してください) */ 15 } 16 .submenu-trigger > ul, 17 .submenu2-trigger > ul{ 18 display:none; 19 } 20 .submenu-trigger:hover > ul, 21 .submenu2-trigger:hover > ul{ 22 display:block; 23 } 24 .submenu-trigger > ul{ 25 background-color:#ddd; 26 } 27 .submenu2-trigger > ul{ 28 position:absolute; 29 left:120px; 30 top:20px; 31 background-color:#aaa; 32 min-height:160px; /* 20pxの8個分で160pxを指定します。(サブカテゴリの数がカテゴリの数より多くなる可能性がなければheightでもOK) */ 33 width:120px; 34 } 35 </style> 36</head> 37<body> 38 <ul> 39 <li class="submenu-trigger">カテゴリ一覧 40 <ul> 41 <li class="submenu2-trigger">カテゴリ1 42 <ul> 43 <li>サブカテゴリ1-1</li> 44 <li>サブカテゴリ1-2</li> 45 <li>サブカテゴリ1-3</li> 46 </ul> 47 </li> 48 <li class="submenu2-trigger">カテゴリ2 49 <ul> 50 <li>サブカテゴリ2-1</li> 51 <li>サブカテゴリ2-2</li> 52 <li>サブカテゴリ2-3</li> 53 </ul> 54 </li> 55 <li class="submenu2-trigger">カテゴリ3 56 <ul> 57 <li>サブカテゴリ3-1</li> 58 <li>サブカテゴリ3-2</li> 59 <li>サブカテゴリ3-3</li> 60 </ul> 61 </li> 62 <li class="submenu2-trigger">カテゴリ4 63 <ul> 64 <li>サブカテゴリ4-1</li> 65 <li>サブカテゴリ4-2</li> 66 <li>サブカテゴリ4-3</li> 67 </ul> 68 </li> 69 <li class="submenu2-trigger">カテゴリ5 70 <ul> 71 <li>サブカテゴリ5-1</li> 72 <li>サブカテゴリ5-2</li> 73 <li>サブカテゴリ5-3</li> 74 </ul> 75 </li> 76 <li class="submenu2-trigger">カテゴリ6 77 <ul> 78 <li>サブカテゴリ6-1</li> 79 <li>サブカテゴリ6-2</li> 80 <li>サブカテゴリ6-3</li> 81 </ul> 82 </li> 83 <li class="submenu2-trigger">カテゴリ7 84 <ul> 85 <li>サブカテゴリ7-1</li> 86 <li>サブカテゴリ7-2</li> 87 <li>サブカテゴリ7-3</li> 88 </ul> 89 </li> 90 <li class="submenu2-trigger">カテゴリ8 91 <ul> 92 <li>サブカテゴリ8-1</li> 93 <li>サブカテゴリ8-2</li> 94 <li>サブカテゴリ8-3</li> 95 </ul></li> 96 </ul> 97 </li> 98 </ul> 99</body> 100</html>

投稿2015/07/21 05:04

編集2015/08/14 02:18
ina

総合スコア127

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mucho0623

2015/08/11 08:21 編集

回答頂きましてありがとうございます。実装しました。 新たに問題点が発生しましたので、追記します。 ■問題点 カテゴリの数が多くて、サブカテゴリの数が少ないとサブカテゴリが表示されているところへマウスをもっていけない。非表示になる。 ex) カテゴリ数が7で、7番目のカテゴリのサブカテゴリ数が3だとすると、   「position:absolute;」になっているので、サブカテゴリは1番目のカテゴリの   真横に3段まで表示される。   よって、7番目のカテゴリまでマウスオーバーした後、真横にサブカテゴリが表示されていないので、マウスが離れると非表示になりサブカテゴリをクリックできない。 上記どのように解消すればよいでしょうか。 「カテゴリの順番よりサブカテゴリ数が少ない場合はカテゴリの真横にサブカテゴリを表示する」ようにしたいのですが、どのように実装すればよいかわかりません。 「position:absolute;」を「position:relative;」に変更しても見た目が汚く出てしまいます。 ご教示頂けると幸いです。
ina

2015/08/14 02:16

「カテゴリの順番よりサブカテゴリ数が少ない場合はカテゴリの真横にサブカテゴリを表示する」のはサブカテゴリの位置が上下するので、見た目的にあまりよくないと思います。 参考サイトで貼られている楽天やプレミアムバンダイのようにサブカテゴリの高さをカテゴリの高さと同じにしておくのがよいと思います。 サンプルを修正しましたので、参考にしてください。 サンプルのように各メニューの高さをline-heightで固定し、サブカテゴリ全体をmin-heightで固定してはどうでしょうか。
mucho0623

2015/08/14 10:00

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

0

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

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

投稿2015/07/20 09:54

Akisute

総合スコア51

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2015/07/17 10:32

rossi46hiro

総合スコア992

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問