컴퓨터, 소프트웨어
드롭 다운 CSS 메뉴를 만들려면
오늘 우리는 "어떻게 드롭 다운 CSS 메뉴를 만들려면 어떻게해야합니까?"의 질문을 고려할 것입니다. 그것은이 항목이 추가 자금을 연결하지 않고 할 것이라는 점을 한 번에 말해야한다. 즉, 메뉴 만 CSS와 HTML로 작성됩니다이다.
훈련
완전히 문서에서 그 안에 무엇인지 이해하기 위해서는 이론적 인 물질과 사귀어 조금 필요합니다. 당신이 의사 클래스에 익숙하다면, 당신은이 단락을 건너 뛸 수 있습니다. «: 호버»그래서, 수직 드롭 다운 CSS 메뉴를 만들, 우리는 같은 요소가 필요합니다. 의사«: 호버»는 어떤 할당 할 수 있습니다 HTML 태그입니다. 그것은 당신이 항목을 마우스를 가져 가면 순간을 정의 할 수 있습니다. «A : : 가져가 {: 붉은 색;}»예를 들어, 우리는 속성을 임명했다. 이 항목은 사용자가 마우스를 가져 가면 것을 의미 마우스 는 어떤 태그 의 내용에 빨간색으로 변합니다. 그것은이 의사 요소는 불 활성화되는 것을 주목할 필요가있다. 그런데,«: 호버»유사한 요소를 관련시켰다. 그러나이에서 우리는 의사 CSS 드롭 다운 메뉴를 만듭니다.
명령
먼저, 드롭 다운 메뉴입니다 이해하자. 이 정의에서 다른 레이아웃을 구성하는 다른 방법을 많이 가져옵니다. 이 경우, 우리는 여러 지속적으로 표시되는 항목과 (숨겨진) 몇 가지 추가로 구성되는 구조를 분석합니다. 의 이론 마무리하고 연습을 시작하자.
- 우리는 우리의 메뉴의 레이아웃을 만들 수 있습니다. , HTML 코드 라벨이 작업을 수행합니다. 중첩 된 목록 만들기 :
-
- < / UL>. 이런 식으로 뭔가 당신의 드롭 다운 메뉴처럼 보일 것입니다. CSS는 나중에 개입합니다. 이 경우 주요 목록은 동봉 된 세 가지 주요 영역과 두 가지로 구성되어 있습니다.
- 하위 메뉴를 숨 깁니다. 우리는 스타일 시트를 사용하여,이 경우, 다음과 같은 속성을 정의되지 : UL UL {디스플레이 : 없음} 이 화면에서 두 번째리스트의 요소를 제거한다.
- , 메뉴 CSS 만들기 기본 목록에서 드롭 다운. 캐스 케이 딩 스타일 시트는 다음과 같은 규칙을 쓰기 : UL 리를 : UL 가져 {디스플레이 : 블록;}. 이 항목은 마우스가 UL 목록에있는 요소 리, 화면 UL에 나타납니다 위에있을 때 (부착)을 의미한다. 언뜻 보면, 이러한 방식은 복잡하고 혼란스러운 것처럼 보일 수 있습니다. 그러나 사실, 모든 것이 매우 간단합니다.
- 태그
- 콘텐츠를 삽입하여이 레이아웃 자신을 사용합니다. 당신은 목록 요소의 수를 변경할 수 있습니다.
장식 변경
즉시 메인 메뉴의 레이아웃이 준비되면, 당신은 등록을 진행할 수 있습니다. 아마, 기꺼이 처음에 많은 사람들이 목록 항목을 표시하는 마커를 제거합니다. 이것은 하나의 속성 CSS, 즉 목록 - 스타일 유형을 사용하여 수행됩니다. 리 {목록 스타일 타입 : 없음;} 다음과 같은 항목을 추가해야합니다. 그런 다음 프레임을 삽입 할 수 있습니다 배경을. 테두리와 배경이 당신을 도와줍니다. 아마도 일부는 풀다운 메뉴가 같은 기본 요소에 밀어 추가 목록으로 표시됩니다 좋아하지 않을 것이다. 이 문제를 해결하려면, 당신은 그것을 배치 할 수 있습니다. 이렇게하려면 CSS 스타일 시트는 다음과 같은 항목을 기록 : UL UL {위치 : 절대; 왼쪽 : 15 픽셀; 오른쪽 : 15 픽셀; 상단 : 15 픽셀; 바닥 : 15 픽셀;}. 물론, 값은 사용자가 직접 사용합니다. 드롭 다운 메뉴를 표시 할 위치에 따라 CSS는 다양한 효과를 추가하고 우리의 목록을 장식 할 수 있습니다 더 많은 기능을 제공합니다.
결론
다시 한번이 메뉴 레이아웃의 건설을 주목할 필요가있다. 예를 들어, UL UL을이 경우 내재 가치에 사용 된 CSS 규칙을 할당합니다. 다른 유사한 구조를 충족시킬 수있는 문서의 경우, 큰 문제가있을 수 있습니다. 이러한 상황에서, 당신은 예를 들어, 선택기 또는 ID-ID에 대해 특정 목적을 사용해야합니다. 위의 문서 레이아웃 드롭 다운 메뉴는 일반적인 디자인을 숙지하도록 설계되었습니다. 작업의 나머지 부분은 당신의 어깨에 달려있다.
Similar articles
Trending Now