というわけで、これまで私のサイトのグローバルな美として活躍してくれたメニューをこのページに移動します。
いや~本当によく働いてくれました。
じゃぁ、移動しますね、えい。



挙動の詳細が知りたい人は勝手にソースを除けばいいにゃ。
他のサイトみたいにhighligher.jsとか使わないにゃよ。
そこまで、やさしくないにゃ!!

というより、動いてないソースだけべた張りしてるサイトとか気持ち悪いにゃ。
しかもどこかからのパクリを常に提供してるっていう

これこれ
まぁ、私は初心者にも中級車にも上級者にも優しくないですけどね。
とりあえず、jqueryは読み込んでおいてくださいね。

簡単にこちら解説しますね。まずはスタイル。

CSS

・Ulタグ内のリストをabsoluteで重ねます。
・Z-indexで重ね順を変更したりします。
・transform-originで回転基準点を決めます。※こちらのソースではJS部分に書かれていますが、スタイルでいいでしょう。

JavaScript

・リストの最大値と最大開閉角度を決めます。※私の場合は最大5リストで最大開閉角度は90°として設計しました。が開閉分は4つなので最大88°になっています。
・rotateに角度を割り振るfor文を与えます。
※for文内で条件分処理させるにはソースのように_iなどをfunction()内に設定します。
・マウスイベントなどを設定します。
※mousuout,overを使いましたが、onやmouseenter,leaveの方がより最適な処理を実現できるかもしれませんのでお試しください。

とまぁ、こんなもんですね。

随分簡単に解説するわね。
これじゃぁわからないんじゃないかしら?

分からなかったらツイッターででも聞いてください。
でも、プロでやってるのにこんなこともわからない人はいないでしょう。
大丈夫です。

関連記事

安定の古名屋ホテルのクリスマスディナーへ呼ばれてきました

ご予約のお名前は?? サエダーです。よろしくどうぞ。場所も知ってます。▼地図▼ストリートビュー相変

記事を読む»

【ロマーニャ@甲斐市篠原】イタリアンランチビュッフェ1,380円でボーノ

今回はイタリア料理の店、リストランテ ロマーニャに行ってきました。

記事を読む»

山梨県甲府市にあるみんなの街のドレミぱんへ行って休憩してきました

今日はみんなの街のドレミぱんさんへ行ってきましたよ。お天気の心配もされましたが、運よくお天気で徒歩で

記事を読む»