전문 CSS3 메뉴 정의 방법 - 인형

분할 단추 메뉴는 CSS3 사이트에 특별한 모양을 부여하는 한 가지 방법을 제공합니다. 분할 버튼은 뷰어에게 기본 메뉴 선택이 현재 볼 수 있지만 다른 선택 사항을 사용할 수 있음을 알려줍니다. 분할 버튼을 클릭하기 만하면 뷰어가 기본 사이트로 이동합니다.

그러나 버튼 옆에있는 아래쪽 화살표를 클릭하면 다른 옵션이 표시되고 뷰어는 기본값 대신 다른 옵션을 쉽게 선택할 수 있습니다.

이 유형의 메뉴는 사람들을 다른 장소로 안내하는 것에 만 국한되지 않습니다. 양식의 일종의 입력 필드 역할을 할 수도 있습니다. 단추는 해당 필드에 대한 기본 선택 사항을 표시합니다. 그러나 더 잘 작동하면 대안 중 하나를 선택할 수도 있습니다. 요점은 분할 단추 메뉴가 메뉴 개발에 대한 특수한 접근 방식을 제공한다는 것입니다.

이 기사의 예제는 Split Menu Buttons v1에 의존합니다. 2 동적 드라이브에 표시된 예입니다. 다음 단계에서는이 특수 메뉴를 사용하여 시작하고 수정할 수있는 제안 사항을 제공합니다.

splitmenubuttons를 다운로드하십시오. js 파일을 찾은 다음 테스트 페이지에 사용할 폴더에 저장하십시오.
splitmenubuttons를 다운로드하십시오. 동적 드라이브 페이지의 1 단계 섹션에서 css 파일을 찾은 다음 테스트 페이지에 사용할 폴더에 배치하십시오.
좋아하는 텍스트 편집기 또는 IDE를 사용하여 새 HTML 5 페이지를 만든 다음 SplitButton으로 저장합니다. HTML.
다음과 같이 태그를 변경하십시오.
```
분할 버튼 메뉴 사용 예제
```
동적 드라이브 페이지의 2 단계 부분에서 모두 선택을 클릭하십시오.

강조 표시된 예제의 머리글 코드가 표시됩니다.
강조 표시된 텍스트를 클립 보드에 복사 한 다음 예제 페이지의 섹션에 붙여 넣습니다.

편집기는 섹션에 코드를 추가합니다. 이 코드를주의 깊게 살펴보면 splitmenubuttons에 대한 링크를 찾을 수 있습니다. css 및 splitmenubuttons에 대한 스크립트 참조 js. 이 예제는 또한 jQuery를 사용하므로 jquery에 대한 스크립트 참조를 찾을 수 있습니다. 분. js.

이 코드에는 jQuery 구문을 사용하는 분할 버튼을 만들기위한 스크립트도 포함되어 있습니다. 메뉴를 만들 때 몇 가지 간단한 규칙을 따르면이 스크립트를 수정할 필요가 없습니다. 다음 단계에서는 이러한 규칙에 대해 설명합니다.
페이지 섹션의 각 최상위 메뉴 항목에 대한 링크를 다음과 같이 작성하십시오.
```
홈 제품 정보
```
이 항목 각각은 페이지의 최상위 메뉴 단추입니다. 사용자가 페이지를 표시하면 홈, 제품 및 정보가 세 개의 버튼으로 표시됩니다.클릭하면 각 버튼이 특정 위치로 이동합니다. 그러나 버튼을 클릭 할 때 아무 것도하지 않으려면 href 속성 대신 #을 사용할 수 있습니다.

클래스는 모든 경우에 splitmenubutton으로 표시되어야합니다. 이 클래스의 CSS는 splitmenubuttons에서 찾을 수 있습니다. CSS 파일.

data-showmenu 속성은 사용할 서브 메뉴를 정의합니다. 특정 버튼이있는 하위 메뉴를 사용하지 않으려는 경우에도 이름을 정의해야합니다. 이 예제에서는 홈 버튼에 하위 메뉴가 포함되지 않습니다.

data-splitmenu 속성은 버튼이 버튼의 일부로 표시 될지 또는 별도의 버튼으로 표시되어야 하는지를 지정합니다. 이 예는 두 경우를 보여줍니다. 기본 설정은 true이며 화살표는 별도의 단추로 나타납니다.

data-menucolors 속성을 사용하여 기본 배경색과 선택한 색상에 사용되는 색상을 지정합니다. 기본 색상은 DarkRed이지만 대부분의 개발자는 기본값을 재정 의하여 특정 모양을 얻고 자합니다.
다음 코드를 사용하여 제품 메뉴의 하위 메뉴를 만듭니다.
```
제품 1
제품 2
제품 3
제품 4
제품 5
```
하위 메뉴는 단순히 순서가 없습니다 명부. 각 목록 항목에는 사용자가 이동하려는 위치를 가리키는 앵커가 포함되어 있습니다. 순서가 지정되지 않은 목록에는 data-showmenu 속성 값과 일치하는 id 속성 값이 있어야합니다. 또한 하위 메뉴에서 정렬되지 않은 목록의 첫 번째 수준은 splitdropdown 클래스를 사용해야합니다.

다음 코드를 사용하여 정보 메뉴의 하위 메뉴를 만듭니다.


개인 정보 보호 정책
개인 정보 보호 정책
연락처

전화로
우편으로
전자 메일로 > 웹 마스터

지원
이 메뉴는 좀 더 복잡합니다. 하위 메뉴의 하위 메뉴를 만들려면 그림과 같이 목록 항목 내에 해당 순서없는 목록을 배치하기 만하면됩니다. Contact us 하위 메뉴에는 실제로 세 가지 레벨의 메뉴 옵션이 있습니다.

메뉴 항목 사이에 약간의 공백을 추가하려면 class = "separator"속성을 추가하십시오. 이 속성을 사용하면 사용자가 메뉴 항목 간의 관계를보다 쉽게 볼 수 있습니다.

수정 된 SplitButton을 저장하십시오. HTML을로드하고 브라우저에로드하십시오.