Flickrのドロップダウンメニューを作ってみるシンプルなスクリプト。
Flickrで使われているあのクールなドロップダウンメニューを実装してみよう:phpspot開発日誌Woork: Flickr like horizontal menu
Flickrで使われているあのクールなドロップダウンメニューを実装してみよう！
次のようなクールなドロップダウンメニューを実装してみましょう。
紹介元で、HTMLと画像のサンプルが配布されています。
で、エントリ末に、
JSとHTMLの分離が行われていないのですが、element.onclick = function() {} などとして設定してHTMLとJSを分離してもよいでしょう。
とあったのでやってみた。
function loadFlickrMenu(){
var e = $("flickeMenuButton");
e.onclick = function(){
var id_menu = 'id_menu_profile'
var my_menu = document.getElementById(id_menu);
if(my_menu.style.display=="none" || my_menu.style.display==""){
my_menu.style.display="block";
} else {
my_menu.style.display="none";
}
}
e.onmouseup = function(){
document.arrow_profile.src ="arrow_select.png"
}
e.onmouseover = function(){
document.arrow_profile.src ="arrow_hover.png";
}
e.onmouseout = function(){
document.arrow_profile.src ="arrow.png";
}
}こうですか！わかりません！＞＜
filckr風ドロップダウンメニューサンプル
まぁ一応、IEでもFireFoxでも動くんですけどね。
引数の処理をさぼってるのでこれだけ持って行っても役には立たないぞ、と…。
それより、こんなに簡単にドロップダウンメニューって実現できるんだな…
そっちのが驚きだ。