ユニクロのWEBサイトのメニューの仕組みについて

質問

ユニクロのWEBサイトのメニューの仕組みが知りたいです。

http://store.uniqlo.com/jp/store/feature/casualshirts/l3women/
このページのメインのビジュアルイメージの右上に

TOPへ
コーディネート

とあります。
そちらのコーディネートをクリックすると

四角の中にMENUと書かれたメニュー画像が出てきます。

このメニュー画像をマウスオーバーすると

TOPへ
コーディネート

上記のメニューが中から出てきます。

この仕組みを知りたいのですが、それらを説明している参考サイトなど知っている方いらっしゃればおしえていただければ幸いです。

CSSを見たのですが全く意味が分かりません。
なぜこれで、あのメニューが出来るのでしょうか。
#l3_content_banner p.btnLivebanMenu,
#l3_content_banner ul.btnLivebanMenu{
position:absolute;
top:10px;
right:10px;
}

#l3_content_banner ul.btnLivebanMenu li{
line-height:0%;
font-size:0%;
}

#l3_content_banner ul.btnLivebanMenu li img{
vertical-align:top;
}

よろしくお願いします。

回答No.2

_if_ · ベストアンサー

CSSというよりJavaScriptでの処理ですね。

ざっと見ですが、基本は
div#banner1の
p.btnLivebanMenuと
div.l3banner_menu_containerの
display を block <-> none の切り替えにフェードIn/Outを掛けてる感じでしょうかね。

お礼

回答ありがとうございます。

JavaScriptでの処理だったんですね。

>　display を block <-> none の切り替えにフェードIn/Out
JavaScriptはあまり分からないのですが、こういったことが出来る様に勉強したいと思います。

No.1さんの方が回答が早かったのですが、内容まで説明していただけたのでベストアンサーにしたいと思います。

ありがとうございました。

回答No.1

gr32

CSSだけではなくて、以下のJSと関連して動作していると思いますよ。

/jp/material/js/lib.js
/jp/material/js/uniqlo.js

お礼

回答していただきありがとうございます。

JavaScriptだったんですね。

調べてみたいと思います。

回答ありがとうございました。