TOP  >  WebDesign  >  透明プレートメニューがせり出てくるドック型メニュー「Webber 2.0 Dock Menu」
2007年11月14日

透明プレートメニューがせり出てくるドック型メニュー「Webber 2.0 Dock Menu」

CSSとJavaScriptで作られた、動きのあるシンプルなドック型メニュー「Webber 2.0 Dock Menu」を紹介したいと思います。

webber20dockmenu.jpg

こちらのメニューは透明のプレートが上から出てくるタイプのメニューで、使われている画像が透明なのでサイトに重なりができ、サイトに奥行きをあたえることができます。

詳しくは以下

導入に当たって

このメニュー作りが少し変わっていて、透明部分がPNG画像によって表現されていますのでIE6以下では正常に透明に見えません。広く互換性を持たせるなら画像をgifにするか透明をJpgで色付きにするかしなければいけません。幅広いユーザーを目的としているなら注意したい所です。

ユーザーインターフェイスの面から

以前こういったメニューを使っていましたが、隠れているものを引き出して使うと言うことをユーザーにしてもらわないといけないので使いにくいと言う印象を与えてしまう恐れがあります。また参照元の「ホームページを作る人のネタ帳」さんにも「完全に隠れたら、そこにあるということがわからない」と書かれている通り、使い勝手が良いメニューにする為には一工夫加えたい所ですね。サンプルまたはダウンロードは下記のリンクからどうぞ。

Webber 2.0 Dock Menu

via ホームページを作る人のネタ帳

posted 05:46  |  
Category: WebDesign   
tag: webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る