【CSS】Mac風のアイコンメニュー(FishEyeMenu)をCSSのみで実装してみる

NO IMAGE

こんばんわKudoです。

本日はGeneXusのお話ではなく、CSSのお話です。

Mac風のアイコンメニューってなんとな~く憧れちゃうんですよね、なんででしょう?

ということで、HTML上で同じ動きができないか調べていくと・・・
なかなか良いのが転がっていない!!!

カーソルの乗っているアイコンのみ大きさが変わるものはたくさんありますし
JSを利用しているものもたくさんあるけれどCSSのみでポイントしているアイコンの両端までアニメーションするものは見つけることができなかった・・・

ので作りましょう!

まず↓これ↓が今回作成したCSSの適用結果です。
<サンプル>



ポイントしているアイコンの前後のアイコンが大きくなっていますが
実はこれ、ポイントしているアイコンの“一つ前のアイコン”のhoverでスタイルを変更しているのです。

コントロールの構造はこうなります
<イメージ>
要素構造

<CSS>

<HTML>

positionを利用し、要素を1個ずつずらすことで、あたかもポイントしているアイコンの前後が変わったように見えます。

今回はCSSだけで簡単なアイコンを描画しましたが、Transformを利用しているので、画像を利用してもうまく動くはずです。


・・
・・・

はじめはGeneXusに、見た目がユニークなコントロールが少ないため、CSSだけでカバーできないかと思い作成してみたが、兄弟セレクタなどを利用するためGridオブジェクトでは実装できず、結局TextBlockに対して直接HTMLを記述する結果に・・・

作ったは良いが、いつか使う日が来るのだろうか・・・