CSSのみを使用してラジアルメニューを作成するには?

CSS を使用して放射状メニューを作成するにはどうすればよいですか?

質問:

次のようなメニューを作成する方法:

[画像]

したくないPSD 画像を使用します。 FontAwesome のようなパッケージのアイコンを使用し、CSS で背景/CSS を生成したいと考えています。

PSD を使用して作成できるバージョンのメニューは、ここにあります。

回答:

ほぼ 3 年間待った後、ようやくこの質問を再検討し、改良版を投稿する時間ができました。参考のために最後に元の回答を表示することができます。

SVG の方が良い選択かもしれませんが (特に今日では)、私の目標は、HTML と CSS のみを使用し、JS、SVG、画像は使用しないことです (ルート要素の背景を除く)。

デモ 2015

スクリーンショット:

• Chrome 43:

[画像]

• Firefox 38:

[画像]

• IE 11:

[画像]

コード

HTML は非常にシンプルです。チェックボックストリックを使用してメニューを表示/非表示にしています。

<input type='checkbox'>

私は物事を論理的に保ち、必要に応じて変更を容易にするために Sass を使用しています。たくさんのメモ。

/* CSS goes here. */

現在、この回答は HTML、Sass、生の JavaScript を対象としています。これは、ソリューションについて詳しく説明し、有用なコード例を提供するため、大きな反響があります。

以上がCSSのみを使用してラジアルメニューを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。