오늘은 친구들의 요청에 따라 내 웹사이트에 있는 슬라이딩 메뉴의 효과에 대한 간단한 튜토리얼을 작성해보겠습니다. 뉴장대학교 소프트웨어학과에서는 레이어 슬라이딩에도 효과가 있는 것 같습니다. 이 효과를 사용하세요. 숨김을 사용하지 않을 때 버튼 레이어를 클릭하면 천천히 슬라이드되어 제한된 페이지 공간을 절약하고 부러워할 만큼 좋은 시각적 효과를 얻을 수 있습니다. 이 효과를 보려면 여기를 클릭하세요.
본론으로 돌아가 말도 안되는 소리는 그만합시다. 준비사항은 다음과 같습니다.
1. dw에서 새 빈 문서를 만듭니다(또는 효과를 추가하려는 페이지를 엽니다).
2. 자신만의 CSS 스타일을 설정하세요.
3． 페이지에 500pix 길이의 표를 삽입합니다. (참고: 표를 삽입하는 목적은 다양한 해상도에서 컨트롤 레이어의 상대적 위치를 변경하지 않고 유지하는 것입니다. 페이지가 이전에 관련 설정을 지정하지 않은 경우 이 작업을 수행해야 할 수 있습니다. 페이지 구조를 정리하는 데 시간을 투자하세요.)
4. 테이블에 커서를 놓고 메뉴 [삽입 - 레이어]를 클릭하여 길이가 500, 높이가 20인 레이어를 삽입하고 이름을 layer1로 지정합니다.
5. 그런 다음 레이어 layer1에 커서를 놓고 [삽입 - 레이어] 메뉴를 클릭하고 길이가 500이고 높이가 130인 레이어2를 삽입합니다. 레이어2 속성의 왼쪽 여백과 위쪽 여백을 0으로 설정하고 지정합니다. 그것은 당신이 좋아하는 배경색입니다.
6． 그런 다음 5단계의 방법을 반복하고 레이어 3을 삽입합니다. 이 레이어는 특별한 용도가 없습니다. 내 튜토리얼에서는 단지 몇 개의 버튼만 배치하려고 합니다. 결국 내 결과는 다음과 같았습니다.
팁: 여기서 이 작업을 수행하는 목적은 슬라이드하려는 레이어 앞에 배플을 추가하는 것입니다. 클릭해야만 레이어가 레이어 아래에서 천천히 미끄러져 나옵니다.
이제 오늘 만들어볼 슬라이딩 메뉴의 제작과정에 본격적으로 들어갑니다.
이제 위의 5단계를 다시 반복하고, 다른 레이어인 layer4를 삽입하고, 레이어 속성을 너비 500과 높이 150으로 설정합니다. 이는 정확히 레이어2와 레이어3의 높이의 합입니다. 그리고 레이어 레이어4를 아래의 다른 두 이미지 레이어로 조정합니다. . 그림과 같이:
그런 다음 레이어 2 앞에 있는 눈을 클릭하여 닫고 그 아래에 있는 레이어 4를 볼 수 있습니다.
이때 ALT + F9를 클릭하여 타임라인 패널을 엽니다. DW는 기본 타임라인 Timeline1을 추가했습니다. 그런 다음 슬라이드할 레이어인 layer4를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 [타임라인에 추가]를 선택합니다. ] 이때 타임라인 패널에 방금 생성한 레이어4가 표시되어 성공적으로 추가되었음을 알 수 있습니다! 
그런 다음 타임라인에서 15번째 프레임을 클릭하고 레이어 4의 속성 패널에서 상단 여백을 150으로 조정합니다. 이제 슬라이딩 레이어가 준비되었습니다. 타임라인의 빨간색 사각형을 1에서 15까지 천천히 드래그하면 레이어2와 레이어3 아래에서 천천히 미끄러지는 모습을 볼 수 있습니다! 
자, 이제 이 슬라이딩 레이어인 layer4를 활성화하기 위한 액션만 설정하면 됩니다. 그러면 끝입니다. 그 전에 추가한 레이어3에 테이블을 삽입하고 레이어4 버튼에 두 개를 설정했습니다.
먼저 슬라이딩 레이어를 활성화하는 작업을 설정합니다. 이 버튼 확장을 선택하고 동작 패널로 이동한 다음
나오는 메뉴에서 [타임라인 - 재생 타임라인]을 선택하면 DW 팝업창이 뜨는데, 위 드롭다운 메뉴에서 타임라인1을 선택합니다.
그런 다음 동작 패널에서 이벤트가 onclick인지 확인합니다.
좋습니다. 확장 버튼을 클릭하면 레이어가 위에서 아래로 천천히 미끄러져 나옵니다.
보시면 어떨까요 :) 레이어에 간단한 닫기 동작을 추가해 보겠습니다. 즉, 닫기 버튼을 클릭하면 레이어가 숨겨집니다. 닫기 버튼을 선택하고 동작 패널로 이동한 다음 팝업되는 메뉴에서 [숨겨진 레이어 표시]를 선택하고, 팝업 형태에서 레이어 4를 선택한 후, 아래의 숨기기 버튼을 클릭하면 그림과 같이 숨김으로 설정됩니다. 
네, 다시 미리보기를 해보니 레이어를 닫으려고 클릭했더니 없어졌네요. :) 그런데 다시 클릭해서 확장해도 아무 일도 일어나지 않는 것 같아서요. 설정되지 않은 작업이 있습니다.
지금 5단계를 반복하고 확장 버튼을 선택한 다음 [타임라인 - 타임라인 프레임으로 이동] 액션을 추가하고 팝업 양식의 드롭다운 메뉴에서 timeline1을 선택한 후 프레임 번호에 1을 추가합니다.
음, 이 미리보기를 통해 이 문제가 해결되었음을 확인했습니다. 하지만 여전히 문제를 간과하고 있는 것 같습니다. 클릭하여 닫은 후 레이어가 숨김으로 설정되고 확장을 클릭해도 응답하지 않습니다. 기존 방법을 사용하고 확장 버튼에 작업을 추가하면 문제가 해결됩니다!
5단계를 반복하고 [숨겨진 레이어 표시]를 선택합니다. 지금은 6단계와 달리 표시를 선택합니다. 확인 후 비헤이비어 패널에 숨겨진 레이어가 표시되는 시간이 클릭인지 확인합니다. 현재 확장된 버튼의 동작 패널은 다음과 같습니다.
알겠습니다. 다시 미리보기해 보세요. 모든 것이 괜찮습니다.
이 시점에서 효과는 완성됩니다. 물론 누구나 스스로 더 나은 효과를 만들 수 있지만 타임라인과 동작 동작을 익히는 한 모든 효과는 작동의 문제일 뿐입니다.