関連リンク
はじめに
実際に使うのはjqueryぽい。
中でも下記２種が比較的よく検索に引っかかりました。
mouseover()とhover()
なにが違うの？
まずここで困惑しました。どちらも作ってみて今回はhoverで実装いたしました。
でも完全ではないので調べ直します。
違い
参照
・jQueryでマウスを乗せたときにイベントを発生させるhover()ですが、cssを使った処理や画像の切り替え、動的に生成した要素にhover()を効かせる。
・mouseover()との違い
hover()はmouseover()と違って、子要素から親要素へのバブリングが起きません。
hover()はバブリングは起きないため、特別な理由がなければhover()を使えばよいでしょう。
やっぱり難しい。。。
理想に近いのは下記のページ
参照ページ
こんな感じの縦だけじゃなく横にも「子要素」「孫要素」と広がっていくタイプのドロップダウンが作りたかったのです。
１ドロップダウンの元になるhaml記述をかく
元となる「親要素」「子要素」「孫要素」をまず上から順に記述しました。
「ancestry」を使用していたので[parent][child][grandchild]という書き方をしています。
%ul.category1
- @parents.each do |parent|
%li.parent__list
= link_to parent.name
%ul.category2
- parent.children.each do |child|
%li.child__list
=link_to child.name
%ul.category3
- child.children.each do |grandchild|
%li.grandchild__list
= link_to grandchild.name
#ul.category1
#ul.category2
#ul.category3で「親」「子」「孫」を分けています
eachを使っているのでここでの.nameの値は１つずつ記述していません。
２JavaSqriptをかく
$(function() {
$(".toppage__footer-nav-category").hover(function() {
$("ul.category1").toggle();
});
$(".toppage__footer-nav-category li ul").hide();
$(".toppage__footer-nav-category li").hover(function() {
$(">ul:not(:animated)", this).stop(true, true).slideDown("fast");
$(">a", this).addClass("active");
}, function() {
$(">ul:not(:animated)", this).stop(true, true).slideUp("fast");
$(">a", this).removeClass("active");
});
});
細かくみます
hover参照
cssのhoverと異なり
jQueryだとhoverしたあとの処理を書いたあとに、要素がマウスから離れてからの処理も記述しないといけないそうなのです。
（戻らない・直らないということになってしまうようです）
$(function() {
$(//hover(最初にカーソルの重なる場所)をここに書く).hover(function() {
$(//hoverした時最初に開きたい場所を書く).toggle();
});
$(//hover(最初にカーソルの重なる場所)をここに書く li ul").hide();
$(//hover(最初にカーソルの重なる場所)をここに書く li").hover(function() {
$(">ul:not(:animated)", this).stop(true, true).slideDown("fast");
$(//link箇所をaで表しています, this).addClass("active");
}, function() {
//ul(カテゴリごとのテーブル)挙動がanimatedによって繰り返し続けてしまうのでstopをかけています
$(">ul:not(:animated)", this).stop(true, true).slideUp("fast");
$(//link箇所をaで表しています, this).removeClass("active");
});
});
//今回link箇所には「親」「子」「孫」の名前が繰り返し表示されるような記述が入っているのでそこの部分がaddやremoveで出たり消えたりしています
//ulは各カテゴリのテーブル部分に当たるのでslideDownやslideUpで出たり消えたりします
animate参考
そしてこの時点で、縦型に表示されていきます
「親」にhoverすると
下段に「子」が出現。
今の段階ではこれでOK
３ドロップダウンを横に表示させていく
実は横に出現させるにはscssが重要でした。
ですので、まず挙動を確認した後見た目を整えるという作業へ移るほうがいいかもなのです。
.toppage__footer-nav-category{
display: none;
position: absolute;
z-index: 5;
left:0px;
h2{
a{
span{
&:hover {
color: #0095EE;
}
}
}
}
}
ul.category1{
display: none;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
width: 224px;
list-style: none;
text-align: center;
cursor: pointer;
text-align: center;
li{
&:hover {
background-color: #ea352d;
a {
color: #fff;
}
}
}
}
ul.category2{
display: none;
background-color: rgb(255, 255, 255);
bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
display: none;
left: 224px;
position: absolute;
top: 44px;
width: 224px;
cursor: pointer;
text-align: center;
li.child__list{
background-color: rgb(255, 255, 255);
a{
color:#000;
}
}
li{
&:hover {
background-color: #ea352d;
a {
color: #fff;
}
}
}
}
ul.category3{
display: none;
background-color: rgb(255, 255, 255);
bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
display: none;
left: 224px;
position: absolute;
top: 0px;
width: 320px;
cursor: pointer;
text-align: center;
li.grandchild__list{
background-color: rgb(255, 255, 255);
a{
color:#000;
}
}
li{
&:hover {
background-color: #ea352d;
a {
color: #fff;
}
}
}
}
こちらのhoverはマウスが重なった時に色を変えるために（課題のため）色がつくようにしておりますが、ボーダーラインやサイズなどいろいろ変えられることでアプリの雰囲気も変えられるのかなと変更したくて仕方がないです。笑
また、今回は時間がなかったため煩雑な記述ですが
mixinを使ったほうが記述もスッキリみやすくなるので
時間のある時に、整えていきたいと思います。
ちなみにコントローラーで設定しているのは以下のみです。
def アクション名や変数
@parents = Category.all.order("id ASC").limit(13)
end
終わりに
js jquery初学者なため、説明の不備や記述の不具合等目も当てられないかたもいらっしゃるかもですが、気づきを増やし、都度、更新していきたいと思います。
***コメントやご指摘、アドバイスなどいただけましたらとても幸いです。
jsで、できる楽しいことはたくさんあると思いますので学びを深め作りたいものを作れるようになりたいです。
最後まで、ご覧いただきましてありがとうございます。