1. 펼침메뉴 (익스플로어 전용) > 유익한 싸이트

본문 바로가기
 

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

페이지 정보

작성자 이름으로 검색 댓글 0건 조회 15,069회 작성일 06-06-24 23:26

본문








1. 메뉴 예제


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


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


① 예제






메뉴













cellPadding=0 width=135 border=1>

http://www.clipartworld.com"
target="detail">




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">

cellPadding=0 border=1 WIDTH="130">

http://www.empas.com"
target="detail">

onmouseover="this.style.backgroundColor='#CCDDFF'"



onmouseout="this.style.backgroundColor=''"
bgColor=#FFFFFF borderColorLight=#FFFFFF>

    엠파스









cellPadding=0 border=1 WIDTH="130">



http://www.hanmir.com"
target="detail">

onmouseover="this.style.backgroundColor='#CCDDFF'"



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">

cellPadding=0 border=1 WIDTH="130">



http://www.dhtmldot.com"
target="detail">





cellPadding=0 border=1 WIDTH="130">

http://nanumi.pe.kr"
target="detail">

onmouseover="this.style.backgroundColor='#CCDDFF'"



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 224건 7 페이지
유익한 싸이트 목록
번호 제목 글쓴이 조회 날짜
116 이름으로 검색 14890 05-27
115 이름으로 검색 14906 08-07
114 no_profile 휴먼 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 14914 10-29
113 이름으로 검색 14917 09-12
112 이름으로 검색 14920 08-07
111 이름으로 검색 14929 10-12
110 이름으로 검색 14974 07-12
109 이름으로 검색 15010 08-07
108 이름으로 검색 15042 12-01
107 이름으로 검색 15064 02-08
106 이름으로 검색 15065 08-24
열람중 이름으로 검색 15070 06-24
104 이름으로 검색 15096 09-05
103 이름으로 검색 15103 08-18
102 이름으로 검색 15119 12-14
101 이름으로 검색 15130 10-11
100 이름으로 검색 15137 09-15
99 이름으로 검색 15171 09-02
게시물 검색