Flickrで使われているあのクールなドロップダウンメニューを実装してみよう
2008年02月26日-
スポンサード リンク
woork: Flickr like horizontal menu
This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu:
Flickrで使われているあのクールなドロップダウンメニューを実装してみよう!
次のようなクールなドロップダウンメニューを実装してみましょう。
紹介元で、HTMLと画像のサンプルが配布されています。
実装自体は次のように関数が定義されていて、
<script language="javascript">
function showMenu(id_menu){
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";
}
}
function swapImage(idStatus){
if(idStatus==0){
document.arrow_profile.src ="arrow_hover.png";
} else if(idStatus==1){
document.arrow_profile.src ="arrow_select.png";
} else if(idStatus==2){
document.arrow_profile.src ="arrow.png";
}
}
</script>
ドロップダウン部分のonclick,onmouseup,onmouseover,onmouseoutにて呼び出しているようです。
JSとHTMLの分離が行われていないのですが、element.onclick = function() {} などとして設定してHTMLとJSを分離してもよいでしょう。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 2000種類以上の汎用ピクトグラムアイコン集「Atlas Icons」
- かわいい手書き風フォント「うさぎとまんげつのサンセリフ」
- ランディングページのサンプル集「Landings」
- WEBのUIコンポーネントギャラリー「The Component Gallery」
- 汎用で使える700+のピクトグラムアイコン「Sargam Icons」
- 白黒写真をWEB上で簡単にカラーにできる「Palette」
- iPhone14Proのモックアップ
- 建築素材風のおしゃれな背景画像「Architextures」
- クールな今どきのギャラリーサイトを作れるサンプル
- SVG形式の背景パターンなどをWEBで生成できる「fffuel」
- 過去のエントリ