開閉幕6 超簡単CSSで左から幕    UP日時 : 2015/04/03

HOME
MOUSE
SLIDE
UP-DOWN
FLY
MOVE
OTHER
MIX
LINK





JavaScriptを全く使用していません。CSSだけで、幕(スクリーン)が左から飛び出してきます。
赤い「MENU」をマウスオンすると、幕が移動してきて、マウスアウトで元に戻ります。
最新ブラウザなら面倒な接頭語(ベンダープレフィックス)は不要のCSS使用なので、記述も簡単です。

CSSの transition の時間設定参考サイトは、Webparkから。
CSSの transform 関数で指定できる変形の種類はHTMLクイックリファレンスから。
今回はその中の translateX「左右移動」を使用しています。