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

본문 바로가기
 

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

페이지 정보

작성자 차동박 이름으로 검색 댓글 0건 조회 16,334회 작성일 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건 6 페이지
MySQL Tip 목록
번호 제목 글쓴이 조회 날짜
153 차동박 이름으로 검색 17923 08-21
152 차동박 이름으로 검색 10690 08-02
151 차동박 이름으로 검색 16857 08-02
150 차동박 이름으로 검색 10435 07-20
149 차동박 이름으로 검색 20209 07-20
148 차동박 이름으로 검색 17097 07-20
147 차동박 이름으로 검색 16332 07-20
146 차동박 이름으로 검색 9482 07-20
145 차동박 이름으로 검색 17284 07-12
144 차동박 이름으로 검색 18499 07-10
143 차동박 이름으로 검색 10001 06-28
142 차동박 이름으로 검색 16880 06-24
열람중 차동박 이름으로 검색 16335 06-24
140 차동박 이름으로 검색 17812 05-27
139 차동박 이름으로 검색 15708 05-27
138 차동박 이름으로 검색 10220 05-27
137 차동박 이름으로 검색 18588 04-13
136 차동박 이름으로 검색 17295 03-18
게시물 검색