HTML5 및 CSS3 프로그래밍을위한 동적 목록 작성 방법 - 더미

단순한 버튼 목록은 일반적인 HTML5 링크보다 잘 보이지만 때로는 페이지에 더 복잡한 탐색 체계가 있어야합니다. 예를 들어, 사용자가 사이트의 구조를 볼 수 있도록 메뉴 시스템을 만들 수 있습니다.

중첩 목록 작성

CSS없이 중첩 목록의 시스템을 작성하는 것으로 시작하십시오.

아직 CSS 스타일이 지정되지 않았지만 목록 자체에는 복잡성이 있습니다.

• 기본 목록에는 세 개의 항목이 있습니다. 이것은 실제로 다중 레이어 목록입니다. 최상위 수준은 범주를 나타내며 반드시 링크가 아닙니다.

• 상위 목록의 각 요소에는 자체 하위 목록이 있습니다. 두 번째 계층의 링크는 대부분의 요소에 다양한 링크가 있습니다. 웹 개발 요소에는 또 다른 하위 계층이 있습니다.

• 이 목록 항목의 일반적인 레이아웃은 가장 복잡한 웹 사이트와 같이 복잡한 정보 계층 구조에 해당합니다.

  이 목록은 HTML Strict 표준의 유효성을 검사합니다.

• 다단계 목록과 같이 다소 복잡한 HTML 코드가 포함 된 경우 CSS를 추가하기 전에 코드의 유효성을 검사하는 것이 특히 중요합니다. 일반 HTML 문서에서 눈에 띄지 않을 수있는 HTML 구조의 작은 문제로 인해 CSS에 모든 종류의 이상한 문제가 발생할 수 있습니다. 일반 HTML로 중첩 된 목록의 코드는 다음과 같습니다.

내가 좋아하는 링크 중 일부

소셜 네트워킹

digg

reddit
stumbleupon
참조


google

위키 백과
사전
웹 개발


XHTML / CSS

w3 학교

htmlHelp
CSS Zen Garden
프로그래밍


javascript. com

php. net
mysql. com
이처럼 복잡한 중첩 목록을 만들 때 들여 쓰기에 특히주의하십시오. 적절한 들여 쓰기가 없으면 페이지의 구조를 설정하기가 매우 어려워집니다. 또한 목록 항목에는 텍스트와 다른 목록이 포함될 수 있습니다. 다른 모든 배열은 유효성 검사 오류를 발생시킵니다.

내부 목록 숨기기

동적 메뉴 시스템을 만드는 첫 번째 단계는 목록 항목에 포함 된 목록을 숨기는 것입니다. 페이지에 다음 CSS 스타일을 추가하십시오:

li ul {display: none;}

실제로이 기술은 메뉴 시스템과 같이 특별히 표시된 div에만 적용됩니다.

당신의 페이지는 놀라운 변화를 겪을 것입니다.

CSS 코드의 작은 조각이 진정한 강점입니다.

목록 항목 내에 나타나는 정렬되지 않은 목록에서 작동하는 것과 같은 몇 가지 흥미로운 작업을 수행합니다.

• 이것은 실제로 최상위 목록이 영향을받지는 않지만 목록 항목 내에 나타나는 정렬되지 않은 목록은 적용된 스타일. display: none

• 를 사용하여 텍스트를 사라지게합니다. HTML 페이지가 주어진 데이터를 모두 숨기도록 표시 속성을 설정합니다. 이 코드는 거의 모든 브라우저에서 잘 작동합니다. 내부 목록을 큐에 표시하기

재미있는 부분은 마우스가 부모 요소 위에있을 때 내부 목록이 팝업되도록하는 것입니다. 두 번째 CSS 스타일은 이렇게 할 수 있습니다:

li ul {display: none;} li: hover ul {display: block;}

새로운 코드는 꽤 흥미 롭습니다. 소셜 네트워킹 요소 위에 마우스를 올려 놓는 효과를 확인하십시오.

이 코드는 모든 브라우저에서 작동하지 않습니다! Internet Explorer 6 (IE6) 및 이전 버전은: a를 제외한 모든 요소에서: hover 가상 클래스를 지원하지 않습니다. 초기 버전의 IE에 대한 대체 스타일을 조건부 주석으로 제공하십시오. 모든 최신 브라우저 (IE 7 이상 포함)는 정상적으로 작동합니다.

목록 재현 코드가 작동하는 방법은 다음과 같습니다.

목록 내의 모든 목록이 숨겨집니다.

첫 번째 스타일 규칙은 목록 요소 안에있는 모든 목록을 숨 깁니다.

li ul {display: none;} li: hover> ul {display: block;}