HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO

そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す

[precommend]

TKGHatebuReaderより

[musicala]

おお、これは試してみたい。

[mikuiswife]

TKGHatebuReaderより

[ku_marin]

すごい

[tiroruchoco]

HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた ｜ クラスメソッド開発ブログ

[bartleby0911]

使ってみたい

[warriorking]

HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた ｜ クラスメソッド開発ブログ

[Nemisama]

作ってみた・▽・

[site159]

アニメーション系　全部CSS3でよくね？　ブツ自体にはよるだろうけど

[tihata]

あーWebデザインレシピさんにもついてるやつだー！僕も試してみようかなー

[typista]

ぽけったー HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた

[mustache_york]

めも！

[fulic]

すごい...

[htsign]

すげー。今後使うことあるか分からんけど、コードは勉強になるなぁ。ところでIE10さんのこともたまには思い出してあげてください。

[pochi-mk]

かっけ～。良いなぁこれ。

[sato-shi]

イイ動き