매우 간단한 메뉴이지만 이 예제를 통해 CSS 및 JavaScript에 대한 관련 지식을 배울 수 있으며 이는 드롭다운 메뉴를 만드는 원리와 기본을 이해하는 데 큰 도움이 됩니다. 이 예에서는 DIV 태그를 드롭다운 메뉴 열로 사용하고 TABLE을 메뉴 헤더로 사용했습니다. 원칙은 마우스 움직임을 식별하여 드롭다운 메뉴 열의 표시 속성을 전환하는 것입니다.
다음은 이 DIV 메뉴의 효과입니다. 페이지의 빈 공간을 클릭하면 드롭다운 메뉴 표시가 취소됩니다.
잡지 기술 사이트 포털 사이트 개인 수집 사이트
예스키닷컴
컴퓨터 대리점 정보
트렌디한 전자제품
시나
소후 소후
넷이즈 넷이즈
마우스 네트워크 프로그래밍 스테이션
중국 동창 기록
글쎄요,
중국 소프트웨어 개발 네트워크
, 만약 수십 줄의 코드만으로 그러한 효과가 나타난다면 믿으시겠습니까?아무튼 이 메뉴를 만드는 방법을 차근차근 배워보도록 하겠습니다. 단계별로 가자.
첫 번째 단계는 메뉴 항목과 메뉴 열에 대한 CSS 캐스케이딩 스타일 시트를 정의하는 것입니다. 여기서 CSS가 무엇을 의미하는지 모르는 경우 "컴퓨터 뉴스 웹사이트"의 CSS 튜토리얼을 참조하세요. 두 개의 CSS 클래스를 정의합니다. 하나는 Meun이고 다른 하나는 SubMenu입니다. Menu는 메뉴 상단에 표시되는 스타일을 정의하고 Submenu는 드롭다운 메뉴 열의 표시 스타일을 정의합니다. 여기서 주목해야 할 것은 하위 메뉴의 "position:absolute;width:200" CSS 속성입니다. 이는 하위 메뉴를 표시하는 위치를 결정하기 때문에 필요합니다. 다른 CSS 속성은 선택 사항입니다. 다음은 이 두 가지 CSS 클래스에 대한 설명입니다. 웹 사이트의 <head></head> 또는 <body></body> 사이에 다음 단락을 넣을 수 있습니다.
<스타일>
<!--
.menu {배경색:녹색;너비:120; 높이:20;색상: 흰색; 텍스트 정렬: 중앙;글꼴-크기:9pt;글꼴-가중치:굵게
.submenu {위치:절대;상단:40;배경색:밝은 노란색;폭:180;
-->
</STYLE>
두 번째 단계에서는 드롭다운 메뉴 열을 숨기고 표시하는 Javascript 코드를 살펴보겠습니다. 이 코드는 매우 간단하며 JavaScript를 조금 배운 사람이라면 누구나 쉽게 이해할 수 있습니다. Javascript를 이해하지 못하는 경우에는 "컴퓨터 뉴스 웹사이트"의 JavaScript 관련 기사도 참조하세요. 이 코드의 의미는 마우스가 메뉴 요소(Menu)에 들어갈 때마다 Show라는 함수에 의해 해당 드롭다운 메뉴 열이 표시된다는 것입니다. 이 Show 함수의 주요 기능은 현재 드롭다운 메뉴 열을 표시하고, 다른 메뉴 열을 숨기고, 현재 표시된 메뉴 항목을 cm 변수에 넣는 것입니다. 또한 여기에는 간단한 마우스 클릭 이벤트(onclick) 핸들러도 추가했습니다. 마우스가 웹 페이지를 클릭하면 모든 드롭다운 메뉴 열이 숨겨집니다. 아래에는 드롭다운 메뉴 열의 표시 위치를 얻는 데 사용되는 getPos라는 함수가 포함된 전체 Javascript 프로그램이 나와 있습니다.
<스크립트>
varcm=널;
document.onclick = new Function("show(null)")
함수 getPos(el,sProp)
{var iPos = 0
동안(el!=null)
{iPos+=el["오프셋" + sProp]
엘 = el.offsetParent}
iPos 반환}
함수 표시(el,m)
{if (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"왼쪽")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }
</SCRIPT>