드롭 다운 CSS 메뉴를 어떻게 생성합니까?
계단식 스타일 시트 (CSS)는 HTML (Hyper Text Markup Language) 또는 Extensible Markup Language (XML) 문서를 설명하는 데 사용되는 이름입니다. 모든 유형의 XML 문서에 사용할 수 있지만 HTML로 작성된 웹 페이지에서 가장 자주 사용됩니다. CSS는 웹 페이지에서 드롭 다운 메뉴를 만드는 데 사용될 수 있습니다. 드롭 다운 CSS 메뉴는 방문자가 마우스를 사용하여 메뉴를 통해 마우스를 호버링 할 때까지 표시되는 단일 텍스트 항목이 있습니다.이 시점에서 전체 항목 목록이 표시됩니다. 메뉴는 CSS 식별 및 클래스 태그를 사용하여 만들어집니다.
CSS 메뉴는 ID 선택기로 시작합니다. 이 선택기는 #처럼 보입니다. 다음은 ID의 이름이 뒤 따릅니다. ID의 이름을 지정할 수 있지만 다른 사람들이 코드를 읽을 수 있도록 설명 적이어야합니다. 예를 들어, 드롭 다운 메뉴는 코드 #drop1을 사용할 수 있습니다.
드롭 다운 CSS 메뉴에서 첫 번째 항목에 대한 클래스를 생성하는 클래스 선택기를 사용하여 기간처럼 보입니다. 클래스는 HTML 목록 요소의 일부가됩니다.. 목록 요소는 "Li"문자로 지정됩니다. "li.top"을 입력하여 최상위 클래스를 만듭니다. 수업 설명은 두 개의 곱슬 괄호 사이에 포함됩니다.
다음 예제는 목록의 첫 번째 항목에 대한 전체 CSS 코드를 보여줍니다.
#drop1 li.top {font-family : Verdana, Geneva, San-Serif;
글꼴 크기 : 100%;
색상 : #ff00ff;}
다음, CSS 메뉴의 첫 번째 항목 아래에 숨겨 질 항목에 대한 클래스를 만듭니다. 이 클래스는 HTML 이외의 목록을 설명하며, "UL"문자로 지정됩니다. 설명은 기본적으로 최상위 메뉴 항목과 동일하게 보이며 설명의 시작 부분에 "display : none#59"라는 단어가 추가됩니다. 이는 포인터가 드롭 다운 CSS 메뉴 위로 떠날 때까지 순서 대표 목록의 항목이 숨겨져 있음을 나타냅니다.
다음CSS 코드 의이 부분의 예입니다.
#drop1 ul.link {
디스플레이 : 없음#59
Font-Family : Verdana, Geneva, San-Serif;
글꼴 크기 : 100%;
색상 : #ff00ff;}
나머지 HMTL 문서에 드롭 다운 CSS 메뉴가 표시되기를 원할 것입니다. 그렇지 않으면, 방문자가 메뉴를 통해 호버링되면 나머지 문서를 페이지 아래로 밀어 목록의 공간을 만들어냅니다. 위치 요소를 절대로 설정하면이 작업을 수행합니다.
위치를 설정하는 코드는 다음과 같습니다.
#drop1 {위치 : 절대;}
드롭 다운 메뉴의 CSS 부분에 필요한 전부입니다. 드롭 다운 CSS 메뉴의 나머지 부분은 "div", "id", "class", "li"및 "ul"요소를 사용하여 HTML 문서에서 작성됩니다. "div"태그는 문서의 메뉴 부분을 분리합니다.
첫 번째 목록 항목에 최고 클래스를 추가하고 나머지 항목의 링크 클래스를 추가하십시오. HTML 코드는 다음과 비슷해 보일 것입니다.
웹 브라우저에서 문서를 열면 드롭 다운 CSS 메뉴가 페이지의 단일 항목으로 나타납니다. 마우스를 상단 항목 위로 움직일 때 나머지 메뉴가 나타납니다. 페이지의 나머지 텍스트는 움직이지 않지만 메뉴에 부분이 숨겨집니다.