드롭 다운 CSS 메뉴를 작성하는 방법

CSS (Cascading Style Sheets)는 HTML (Hyper Text Markup Language) 또는 XML (Extensible Markup Language) 문서의 형식을 지정하는 데 사용되는 이름입니다. 모든 유형의 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 메뉴의 첫 번째 항목 아래에 숨길 항목에 대한 클래스를 만듭니다. 이 클래스는 "ul"문자로 지정된 HTML 비 순차 목록을 설명합니다. 설명은 본질적으로 최상위 메뉴 항목과 동일하게 보이며 설명의 시작 부분에 "display : none # 59"라는 단어가 추가됩니다. 이는 포인터가 드롭 다운 CSS 메뉴 위에 놓일 때까지 정렬되지 않은 목록의 항목이 숨겨 짐을 나타냅니다.

다음은 CSS 코드의이 부분에 대한 예입니다.

# drop1 ul.link {
디스플레이 : 없음 # 59
폰트 패밀리 : Verdana, Geneva, san-serif;
글꼴 크기 : 100 %;
색상 : # FF00FF;}

CSS 메뉴 드롭 다운 메뉴에서 나머지 HMTL 문서 위에 표시되도록 할 수 있습니다. 그렇지 않으면 방문자가 메뉴 위로 마우스를 가져 가면 나머지 문서를 페이지 아래로 밀어 목록을위한 공간을 만듭니다. 위치 요소를 절대로 설정하면이 작업이 수행됩니다.

위치를 설정하는 코드는 다음과 같습니다.

# drop1 {position : absolute;}

이것이 드롭 다운 메뉴의 CSS 부분에 필요한 전부입니다. CSS 메뉴의 나머지 드롭 다운 메뉴는 "div", "id", "class" ""li "및"ul "요소를 사용하여 HTML 문서에 작성됩니다. "div"태그는 문서의 메뉴 부분을 분리합니다. 드롭 다운 메뉴 부분을 만들려면 <div id = "drop1">을 입력하십시오. 그런 다음 HTML "ul"요소를 사용하여 순서가없는 목록을 시작하십시오.

첫 번째 목록 항목에 최상위 클래스를 추가하고 나머지 항목에 대한 링크 클래스를 추가하십시오. HTML 코드는 다음과 유사해야합니다.

<div id = "drop1">
<li class = "top"> 인기 항목 </ li>
<li class = "link"> <a href="#"> 항목 </a> </ li>
<li class = "link"> <a href="#"> 항목 </a> </ li>
<li class = "link"> <a href="#"> 항목 </a> </ li>
</ ul> </ div>

웹 브라우저에서 문서를 열면 드롭 다운 CSS 메뉴가 페이지에 단일 항목으로 나타납니다. 상단 항목 위로 마우스를 움직이면 나머지 메뉴가 나타납니다. 페이지의 나머지 텍스트는 이동하지 않지만 메뉴에 의해 일부가 숨겨집니다.