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
最新のブログ記事(新着順)
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約7500種の汎用ピクトグラムアイコン集「Phosphor Icons」
- ほぼCSSで実装されたUIフレームワーク「Ellegant CSS」
- TailwindCSSベースの150種類以上のUIライブラリ「SailboatUI」
- 1700種類以上のSVGアイコン「MingCute Icon」
- 過去のエントリ