CSS만 사용하여 방사형 메뉴를 만드는 방법은 무엇입니까?

CSS를 사용하여 방사형 메뉴를 만드는 방법은 무엇입니까?

질문:

다음과 같은 메뉴를 만드는 방법:

[이미지]

하고 싶지 않습니다 PSD 이미지를 사용하려면 . 차라리 FontAwesome과 같은 패키지의 아이콘을 사용하고 CSS에서 배경/CSS를 생성하고 싶습니다.

PSD를 사용하여 만들 수 있는 메뉴 버전은 여기에서 확인할 수 있습니다.

답변:

거의 3년을 기다린 끝에 마침내 이 질문을 다시 검토하고 개선된 버전을 게시할 시간이 생겼습니다. 참고용으로 마지막에 원래 답변을 볼 수 있습니다.

SVG가 더 나은 선택일 수 있지만(특히 오늘날) 제 목표는 HTML과 CSS만 사용하고 JS는 사용하지 않고 SVG와 이미지를 사용하지 않는 것입니다(루트 요소의 배경 제외).

데모 2015

스크린샷:

• Chrome 43:

[이미지]

• 파이어폭스 38:

[그림]

• IE 11:

[그림]

코드

HTML은 매우 간단합니다. 메뉴를 표시하거나 숨기기 위해 체크박스 트릭을 사용하고 있습니다.

<input type="checkbox">

저는 Sass를 사용하여 논리적인 상태를 유지하고 필요한 경우 더 쉽게 변경할 수 있도록 합니다. 많은 메모.

/* CSS goes here. */

현재 이 답변에는 HTML, Sass 및 원시 JavaScript가 포함됩니다. 이는 솔루션을 자세히 살펴보고 유용한 코드 예제를 제공하므로 큰 응답입니다.

위 내용은 CSS만 사용하여 방사형 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!