드롭다운 메뉴는 인터넷에서 가장 흔히 사용되는 효과 중 하나입니다. 마우스를 클릭하거나 그 위로 이동하면 더 자세한 메뉴가 나타납니다. 이는 웹 페이지 레이아웃의 공간을 절약할 뿐만 아니라 웹 페이지 레이아웃을 간결하고 깔끔하게 만들어줍니다. 질서정연하면서도 참신합니다. 아름다운 드롭다운 메뉴가 웹페이지에 많은 색상을 추가합니다.
드롭다운 메뉴를 만드는 방법은 다양합니다. 이번 칼럼에서는 원하는 대로 자신만의 드롭다운 메뉴를 만들 수 있도록 일반적으로 사용되는 네 가지 방법을 소개합니다.
■ Dreamweaver를 사용하여 드롭다운 메뉴 만들기
??드림위버는 드롭다운 메뉴 제작에 가장 많이 사용되는 도구입니다. 간단한 방법과 자유로운 조작이 가능하며, 메뉴 스타일을 최대한으로 제작할 수 있는 필수 코스입니다.
??Dreamweaver를 사용하여 드롭다운 메뉴를 만드는 원리는 매우 간단합니다. 비헤이비어 패널에 내장된 레이어 표시 숨기기 방법을 사용하고 onMouseOver(마우스 이동) 및 onMouseOut(마우스 이동)을 사용합니다. 레이어 숨기기 및 표시를 트리거하면 나타나는 메뉴가 레이어에 있습니다.
따라서 네 단계로 드롭다운 메뉴를 만들 수 있습니다. 먼저 뷰어 앞에 처음 나타나는 기본 메뉴를 배치하는 데 사용되는 탐색 모음이 필요합니다. 숨겨진 후에 나타납니다. 가장 중요한 단계는 기본 메뉴와 드롭다운 메뉴에 레이어를 숨기고 표시하는 효과를 추가하는 것입니다. 마지막으로 메뉴를 아름답게 만듭니다. 표시되는 최종 효과는 그림과 같습니다. 다음 주소를 방문할 수도 있습니다: menu.htm
??더 이상 기다리실 수 없을 거라 생각하고 바로 시작하겠습니다!
1. 네비게이션 바 제작
먼저 몇 가지 필요한 사전 작업을 수행합니다. Ctrl+J를 눌러 페이지 속성 창을 엽니다. 매개변수 설정은 그림 2와 같습니다. 이 설정은 메뉴 위치에 영향을 미치므로 그림과 같이 설정하세요. 그림.
CTRL+F2를 눌러 개체 패널을 열고 레이어 버튼을 클릭합니다.
마지막으로 페이지에서 레이어를 드래그한 다음 레이어의 속성 패널에서 매개변수를 설정합니다. 레이어 ID 상자에 제목을 입력하고 L, T, W 및 H 상자를 채웁니다. 그림과 같이 각각 8, 15, 15로 배경색을 #006699로 채웁니다.
레이어 내부로 커서를 이동하고 개체 패널에서 테이블 버튼을 클릭합니다.
에서 행 1개와 열 4개로 구성된 테이블을 삽입하고 그림과 같이 설정합니다.
CTRL 키를 누른 채 테이블의 4개 셀을 클릭한 다음 너비를 120으로 설정하고 처음 두 셀에 텍스트를 입력합니다. 이는 기본 메뉴의 이름입니다. 내가 사용한 이름을 입력하면 됩니다. "클래식 포럼" 및 "Tianji.com"이 예시이고 링크가 추가되었습니다.
2. 드롭다운 메뉴 생성
이제 레이어를 사용하여 드롭다운으로 표시될 메뉴 만들기를 시작합니다.
이전에 만든 탐색 모음 아래에 개체 패널에서 레이어를 다시 삽입합니다. 다음과 같이 매개변수를 입력합니다. 레이어 ID 상자에 menu1을 입력하고 L, T, W 및 H 상자에 8, 34, 120을 입력합니다. , 80을 각각 #999966으로 채웁니다. 두 매개변수 L과 T는 이 레이어와 창의 왼쪽 및 위쪽 경계선 사이의 거리를 설정하는 데 사용됩니다. 잘못 채워지지 않으면 메뉴가 표시됩니다. 위치가 잘못될 수 있으며 완료 후 유용성이 영향을 받습니다.
이때 menu1 레이어에는 원하는 메뉴 내용을 입력할 수 있습니다. 레이아웃의 편의를 위해 여기서는 여전히 테이블을 사용하여 메뉴를 만듭니다. 이 레이어는 "클래식 포럼"의 드롭다운 메뉴로 표시됩니다. 필요한 메뉴 링크를 입력하세요. 같은 방법으로 "Tianji.com"에 대한 드롭다운 메뉴(레이어 메뉴2)를 만듭니다.
이 단계에서 주목해야 할 점은 드롭다운 메뉴가 있는 레이어(menu1, menu2)의 위치가 매우 중요하다는 것입니다(두 매개변수 L과 T에 의해 결정됨). 상단 가장자리는 탐색 모음의 하단 가장자리에 가까워야 세 번째 단계를 완료한 후 메뉴를 정상적으로 사용할 수 있습니다. 네비게이션 바에서 멀리 떨어져 있으면 마우스가 네비게이션 바를 떠나자마자 메뉴가 사라지기 때문입니다.
F2를 눌러 웹 페이지의 세 레이어를 나열하는 LAYER 패널을 엽니다. menu1과 menu2 앞의 공간을 클릭하면 닫힌 눈 아이콘이 나타나고 이 두 레이어는 숨겨집니다. 이 단계는 드롭다운 메뉴의 초기 상태가 보이지 않기 때문에 수행됩니다.
3. 표시 및 숨기기 효과 추가
이 단계는 부패를 마법으로 바꾸는 중요한 단계입니다.
이 단계는 두 부분으로 나뉩니다. 첫 번째는 탐색 표시줄의 기본 메뉴 표시 및 숨기기를 제어하는 명령을 추가하고, 두 번째는 드롭다운 메뉴 자체의 표시 및 숨기기를 제어하는 명령을 추가하는 것입니다.
1. 탐색 모음 섹션에서 먼저 Ctrl 키를 누른 채 탐색 모음의 첫 번째 셀을 클릭합니다. 이제 Shift+F3을 눌러 동작 창을 열고 클릭합니다.
버튼을 클릭하고 드롭다운 옵션에서 "레이어 표시-숨기기"를 선택합니다(그림 참조). 옵션에 해당 항목이 없으면 Show Events For에서 IE 5.0을 선택하고 버튼을 다시 클릭하면 "Show-Hide Layers"가 나타납니다.
아래와 같이 창이 뜹니다. Named Layers 상자에는 현재 웹 페이지의 모든 레이어가 나열됩니다. menu1 레이어가 "Classic Forum"에 응답하도록 하기 위해 "layer "menu1""을 선택합니다. 그런 다음 아래의 "표시" 버튼을 클릭하고 확인을 클릭하세요.
이때 Behaviors 창으로 돌아가면 아래와 같은 단어가 창에 나타납니다. Events 아래의 "onClick" 텍스트를 클릭하면 작은 아래쪽 화살표가 나타납니다. 클릭하고 드롭에서 onMouseOver를 선택합니다. 다운 옵션. 이 단계의 목적은 드롭다운 메뉴 menu1의 상태를 마우스가 첫 번째 셀로 이동할 때 표시로 변경하는 것입니다.
다음 단계는 마우스가 두 번째 셀로 이동할 때 드롭다운 메뉴 menu2를 숨기는 것입니다.
다시 주문하세요 버튼을 클릭하고 드롭다운 옵션에서 "Show-Hide Layers"를 선택하고 팝업 창에서 "layer "menu1" "을 선택합니다. 왜냐하면 menu1 레이어가 "Classic Forum"에 응답하기를 원하기 때문입니다. 그런 다음 아래의 "숨기기" 버튼을 클릭하고 확인을 클릭하세요.
Behaviors 창으로 돌아가서 작은 아래쪽 화살표를 클릭하고 드롭다운 옵션에서 onMouseOut을 선택합니다.
2. 드롭다운 메뉴 부분에서 먼저 레이어 가장자리를 클릭하거나 LAYER 패널에서 menu1을 클릭하여 레이어 menu1을 선택합니다. 탐색 모음 부분과 동일한 방법을 사용하여 동작 창에 표시하거나 숨기는 명령을 추가합니다. . 그 결과 마우스가 레이어 menu1 밖으로 이동하면 레이어 menu1이 자동으로 숨겨집니다. 마지막 레이어 menu1의 상태는 그림과 같습니다.
3． 위의 두 부분을 반복하고 두 번째 메인 메뉴 "Tianji.com"과 탐색 모음의 레이어 메뉴2에 레이어 표시 및 숨기기 명령을 추가합니다.
4. 드롭다운 메뉴의 미화 및 수정
이 시점에서 드롭다운 메뉴의 기능적 효과가 구현되었으며, 이제 F12를 누르면 볼 수 있습니다. 그러나 메뉴가 약간 보기 흉하고, 글꼴이 충분하지 않으며, 메뉴 옵션의 기본 링크 색상이 보기에 좋지 않고, 메뉴에 테두리가 없다는 점도 알아야 합니다. 따라서 약간의 아름다움을 더해 보겠습니다. .
1. 메뉴 글꼴 스타일을 정의합니다. Shift+F11을 눌러 CSS 스타일 패널을 열고 패널 아래를 클릭합니다.
단추
그림과 같이 팝업 "새 스타일" 창의 태그 상자에서 td 태그를 선택하고 두 번째 항목인 유형에 대한 HTML 태그 재정의를 선택한 다음 정의에 이 문서만을 선택합니다.
이때, 설정창이 뜨는데요, 다른 사항과 상관없이 오른쪽의 Size 박스에서 12를 선택하시면 되고, 단위는 픽셀입니다.
2. 메뉴 링크 스타일을 정의합니다. 스타일 패널에서 패널 아래의 버튼을 클릭합니다. 팝업 창에서 세 번째 항목인 유형에 CSS 선택기 사용을 선택하고 태그 상자에서 a:hover 태그를 선택한 다음 이 문서를 선택합니다. 그림과 같이 정의에만 해당됩니다.
확인을 클릭한 후 팝업 창에서 색상에 #ff9933을 입력하고 장식에 없음을 선택한 후 확인을 클릭합니다.
스타일 패널로 돌아가서 패널 아래를 클릭하세요. 버튼을 클릭하고 팝업 창에서 세 번째 항목인 유형에 CSS 선택기 사용을 선택하고 태그 상자에서 a:link 태그를 선택한 후 정의에서 이 문서만을 선택합니다.
확인을 클릭한 후 팝업창에서 색상에 #ffffff를 입력하고 장식에 없음을 선택한 후 확인을 클릭합니다.
스타일 패널로 돌아가서 패널 아래를 클릭하세요. 버튼을 클릭하고 팝업 창에서 세 번째 항목인 유형에 CSS 선택기 사용을 선택하고 태그 상자에서 a:visited 태그를 선택한 후 정의에서 이 문서만을 선택합니다.
확인을 클릭한 후 팝업창에서 색상에 #ffffff를 입력하고 장식에 없음을 선택한 후 확인을 클릭합니다.
3． 스타일 패널에서 메뉴 테두리 스타일을 정의하고 패널 아래 버튼을 클릭한 후 팝업 창에서 태그 상자에서 td 태그를 선택하고 두 번째 항목인 유형에 대해 HTML 태그 재정의를 선택한 다음 정의에서 이 문서만을 선택합니다. , 그림에 표시된 것처럼.
설정 창이 뜨는데, 왼쪽 목록에서 Border를 선택하고, 오른쪽 네 변의 너비를 1로 입력하고, 색상을 검정색 #000000으로 설정하고, Style을 Solid로 선택합니다.
이 시점에서 우리는 성공했습니다. 지금 웹페이지에서 사용해 보세요.