何となくドロップダウンメニューを探していて、こんなのを発見。
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でも動くんですけどね。
引数の処理をさぼってるのでこれだけ持って行っても役には立たないぞ、と…。

それより、こんなに簡単にドロップダウンメニューって実現できるんだな…
そっちのが驚きだ。
  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories