1. 펼침메뉴 (익스플로어 전용) > MySQL Tip

본문 바로가기
 

1. 펼침메뉴 (익스플로어 전용)

페이지 정보

작성자 차동박 이름으로 검색 댓글 0건 조회 16,357회 작성일 06-06-24 23:26

본문

1. 메뉴 예제

아래의 예제를 수정하시면 자바 스크립트를 이용한 간단한 메뉴를 만들 수 있습니다. 탐색기 폴더와 약간 비슷하다고 할 수 있을라나??? 펼침 메뉴를 누르면 만약 이미 펼쳐진 메뉴가 있다면 닫히고 새롭게 하나만 펼쳐집니다.

예제 밑에 설명을 달았으니 참조하세요. 참 익스플로어 전용입니다.

① 예제



메뉴






http://www.clipartworld.com" target="detail">
onmouseout="this.style.backgroundColor=''" bgColor=#FFFFFF borderColorLight=#AABBFF height=23>
"1.gif" 클립아트

onclick="clickshow(1)"
onmouseout="this.style.backgroundColor=''" bgColor=#FFFFFF borderColorLight=#AABBFF height=23>
name=bar1 src="1.gif" border=0> 검색엔진

id=block1 "DISPLAY: none; MARGIN-LEFT: 3px; CURSOR: hand">
http://www.empas.com" target="detail">
onmouseout="this.style.backgroundColor=''" bgColor=#FFFFFF borderColorLight=#FFFFFF>
    엠파스

http://www.hanmir.com" target="detail">
onmouseout="this.style.backgroundColor=''" bgColor=#FFFFFF borderColorLight=#FFFFFF>
    한미르



onclick="clickshow(2)"
onmouseout="this.style.backgroundColor=''" bgColor=#FFFFFF borderColorLight=#AABBFF height=23>
name=bar2 src="1.gif" border=0> 추천사이트

id=block2 "DISPLAY: none; MARGIN-LEFT: 3px; CURSOR: hand">
http://www.dhtmldot.com" target="detail">
onmouseout="this.style.backgroundColor=''" bgColor=#FFFFFF borderColorLight=#FFFFFF>
    홈제작도우미

http://nanumi.pe.kr" target="detail">
onmouseout="this.style.backgroundColor=''" bgColor=#FFFFFF borderColorLight=#FFFFFF>
    나누미








결과보기

② 설명

우선 주의 깊게 보아야 할 부분이 빨간색 부분입니다.

for (i=1;i<3;i++) {

에서 i는 1부터 시작해서 3보다 작을 때 까지 수행됩니다. 1과 2! 이렇게 두번 수행되겠죠. 여기서 3은 메뉴를 클릭했을 때 서브메뉴가 있어 메뉴가 펼쳐지는 메뉴의 갯수입니다. 위에서는 "검색엔진", "추천사이트" 두 개가 있죠? 만약 총 메뉴가 10개 있는데, 3개는 그냥 클릭했을 때 링크가 되고 7개는 서브메뉴가 있는 메뉴라면 for (i=1;i<8;i++) {라고 해야겠죠? "서브메뉴를 포함한 메뉴의 수+ 1"이 됩니다.

그리고 위의 소스를 자세히 보면 onclick="clickshow(2)", name=bar2, id=block2 와 같이 세 군데 붉은 표시가 되어 있습니다. 서브메뉴를 포함한 첫번째 메뉴는 onclick="clickshow(1)", name=bar1, id=block1 로 표시를 하고 서브 메뉴를 포함한 메뉴 부분이 증가할 때 마다 각각 1씩 증가시켜 주면 됩니다. 7번째 서브메뉴를 포함한 메뉴 부분에는 onclick="clickshow(7)", name=bar7, id=block7와 같이 각각 적어주면 되겠죠.

그리고 target 부분은 파란색으로 표시했는데, 여러분의 홈페이지에 맞게 target을 설정해 주면 됩니다. 그리고 색상은 여러분이 편하실 대로 수정을 하시면 되구요. 이미지도 여러분 나름대로 넣으면 되겠죠?

이만하면 설명이 된 것 같은데.. 잘 안되는 부분이 있으면 자바스크립트 Q and A에 남겨주세요.

댓글목록

등록된 댓글이 없습니다.

Total 243건 9 페이지
MySQL Tip 목록
번호 제목 글쓴이 조회 날짜
99 차동박 이름으로 검색 16880 08-02
98 차동박 이름으로 검색 16809 12-01
97 차동박 이름으로 검색 16735 12-27
96 no_profile 차동박 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 16536 02-17
95 차동박 이름으로 검색 16499 09-12
94 차동박 이름으로 검색 16497 09-02
93 차동박 이름으로 검색 16491 10-13
열람중 차동박 이름으로 검색 16358 06-24
91 차동박 이름으로 검색 16352 07-20
90 no_profile 차동박 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 16332 03-01
89 no_profile 차동박 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16227 07-29
88 차동박 이름으로 검색 16169 12-20
87 차동박 이름으로 검색 16166 09-21
86 차동박 이름으로 검색 15724 05-27
85 이름으로 검색 15541 08-07
84 이름으로 검색 15472 08-07
83 이름으로 검색 15419 08-07
82 이름으로 검색 15332 08-07
게시물 검색