웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
개판 오분전 select menu.........
2003.02.18 13:10
...........를 가장한 레이어 메뉴...ㅡ,.ㅡ
select 메뉴 효과를 볼수 있는 레이어 메뉴입니다.
세이클럽 셀렉트 메뉴를 흉내 냈고 아래 제로님 소스도 흉내 냈고.......
어쨋든 그래서 개판 오분전입니다.
메뉴 추가와 타겟 설정이 쉽습니다.
공짭니다.
이거 쓰믄 얼굴이 잘 생겨집니다.
어쩌면 로또 복권에 당첨 될런지도 모릅니다.
느닷 없이 개뼉다구를 선물 받을런지도 모릅니다.
미리 보기 : http://allzza.net/maddog/tip/selectmenu.html
<style type='text/css'>
body
A:link { text-decoration:none;font-size:12px; color: navy;}
A:visited { text-decoration:none;font-size:12px; color: navy;}
A:active { text-decoration:none;font-size:12px; color: navy;}
A:hover {color: 0000ff;font-size:12px; text-decoration:none;}
</style>
<script>
/*******************************
제작 : 미친개
이멜 : maddog07@korea.com
홈피 : http://allzza.net/maddog
날짜 : 2003.2.18
********************************/
var sel_menu = 0;
var menu_list = new Array(
/*******************************************
메뉴 추가할땐
new Array('추가 메뉴 이름','주소')
의 형태로 추가 하세요. 맨뒤에 추가할때 지금 현재 맨뒷 메뉴 뒤에 없는 쉼표(,)를 적어주고
새로 추가된 맨뒷 메뉴 뒤엔 쉼표가 없어야 합니다.
맨 첫 메뉴는 select 메뉴가 아무것도 선택 되지 않았을때 보여질 문자열입니다.
*********************************************/
new Array('카테고리',''),
new Array('엔지오','http://nzeo.com'),
new Array('미친개네 집','http://allzza.net/maddog'+ '),
new Array('태그 매니아','http://tagmania.net'),
new Array('오마이 뉴스','http://ohmynews.com')
);
var mytarget = '_new'; //-- target 이름
function view_sub(sel_menu) {
document.all.sub_my2.style.visibility = 'visible';
document.all.sub_my.innerHTML = '<table width=100% bgcolor=#3595a7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[sel_menu][0] + '</td><td width=20% align=center><a href='javascript:hidden_sub(' + sel_menu + ')'>▲</a></td></tr></table>';
}
function hidden_sub(sel_menu) {
document.all.sub_my2.style.visibility = 'hidden';
document.all.sub_my.innerHTML = '<table width=100% bgcolor=#3595a7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[sel_menu][0] + '</td><td width=20% align=center><a href='javascript:view_sub(' + sel_menu + ')'>▼</a></td></tr></table>';
if(sel_menu != 0) window.open(menu_list[sel_menu][1],mytarget,'');
}
for(i=0;i<menu_list.length;i++) {
if(i == 0) {
document.write('<div id=sub_my style="width:150;border:1 solid #000000;font-size:12px;color:navy">'
+ '<table width=100% bgcolor=#3595a7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[i][0] + '</td><td width=20% align=center><a href='javascript:view_sub(' + i + ')'>▼</a></td>'
+ '</tr></table></div>'
+ '<div id=sub_my2 style="width:150;border-left:1 solid #000000;border-right:1 solid #000000;border-bottom:1 solid #000000;font-size:12px;color:navy;visibility:hidden">'
+ '<table width=100% bgcolor=#75c5f7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">');
}
else {
document.write('<tr><td width=100% height=18 onmouseover='this.style.backgroundColor="#3595a5"' onmouseout='this.style.backgroundColor="#75c5f7"'><a href='javascript:hidden_sub(' + i + ')'>' + menu_list[i][0] + '</a></td></tr>');
}
}
document.write('</table></div>');
</script>
select 메뉴 효과를 볼수 있는 레이어 메뉴입니다.
세이클럽 셀렉트 메뉴를 흉내 냈고 아래 제로님 소스도 흉내 냈고.......
어쨋든 그래서 개판 오분전입니다.
메뉴 추가와 타겟 설정이 쉽습니다.
공짭니다.
이거 쓰믄 얼굴이 잘 생겨집니다.
어쩌면 로또 복권에 당첨 될런지도 모릅니다.
느닷 없이 개뼉다구를 선물 받을런지도 모릅니다.
미리 보기 : http://allzza.net/maddog/tip/selectmenu.html
<style type='text/css'>
body
A:link { text-decoration:none;font-size:12px; color: navy;}
A:visited { text-decoration:none;font-size:12px; color: navy;}
A:active { text-decoration:none;font-size:12px; color: navy;}
A:hover {color: 0000ff;font-size:12px; text-decoration:none;}
</style>
<script>
/*******************************
제작 : 미친개
이멜 : maddog07@korea.com
홈피 : http://allzza.net/maddog
날짜 : 2003.2.18
********************************/
var sel_menu = 0;
var menu_list = new Array(
/*******************************************
메뉴 추가할땐
new Array('추가 메뉴 이름','주소')
의 형태로 추가 하세요. 맨뒤에 추가할때 지금 현재 맨뒷 메뉴 뒤에 없는 쉼표(,)를 적어주고
새로 추가된 맨뒷 메뉴 뒤엔 쉼표가 없어야 합니다.
맨 첫 메뉴는 select 메뉴가 아무것도 선택 되지 않았을때 보여질 문자열입니다.
*********************************************/
new Array('카테고리',''),
new Array('엔지오','http://nzeo.com'),
new Array('미친개네 집','http://allzza.net/maddog'+ '),
new Array('태그 매니아','http://tagmania.net'),
new Array('오마이 뉴스','http://ohmynews.com')
);
var mytarget = '_new'; //-- target 이름
function view_sub(sel_menu) {
document.all.sub_my2.style.visibility = 'visible';
document.all.sub_my.innerHTML = '<table width=100% bgcolor=#3595a7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[sel_menu][0] + '</td><td width=20% align=center><a href='javascript:hidden_sub(' + sel_menu + ')'>▲</a></td></tr></table>';
}
function hidden_sub(sel_menu) {
document.all.sub_my2.style.visibility = 'hidden';
document.all.sub_my.innerHTML = '<table width=100% bgcolor=#3595a7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[sel_menu][0] + '</td><td width=20% align=center><a href='javascript:view_sub(' + sel_menu + ')'>▼</a></td></tr></table>';
if(sel_menu != 0) window.open(menu_list[sel_menu][1],mytarget,'');
}
for(i=0;i<menu_list.length;i++) {
if(i == 0) {
document.write('<div id=sub_my style="width:150;border:1 solid #000000;font-size:12px;color:navy">'
+ '<table width=100% bgcolor=#3595a7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[i][0] + '</td><td width=20% align=center><a href='javascript:view_sub(' + i + ')'>▼</a></td>'
+ '</tr></table></div>'
+ '<div id=sub_my2 style="width:150;border-left:1 solid #000000;border-right:1 solid #000000;border-bottom:1 solid #000000;font-size:12px;color:navy;visibility:hidden">'
+ '<table width=100% bgcolor=#75c5f7 style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">');
}
else {
document.write('<tr><td width=100% height=18 onmouseover='this.style.backgroundColor="#3595a5"' onmouseout='this.style.backgroundColor="#75c5f7"'><a href='javascript:hidden_sub(' + i + ')'>' + menu_list[i][0] + '</a></td></tr>');
}
}
document.write('</table></div>');
</script>
댓글 10
-
.zeve
2003.02.18 18:15
-
임국빈
2003.02.18 20:05
저는 5.5 쓰고 있는데 잘 되내요... -
유지호
2003.02.18 23:48
와~ 저도 한 번 시도해보려고 한 건데... 너무 편해요~^^;; -
유지호
2003.02.19 23:33
ZipShin//에... 그런 뜻이 아니라...;;
저 메뉴를 한꺼번에 두개 이상을 사용하려고 하는데 잘 안 되서 말이에요...
그러니까... '항목추가방법'이 아닌 두 개의 메뉴를 동시에 사용하는 방법이 궁금한거죠...;;;
자바스크립엔 약해서요.. 흐흑...;; -
ZipShin
2003.02.19 19:52
여러개를 사용할려면, Array객체에서 추가하면 됩니다.
new Array('카테고리',''),
new Array('엔지오','http://nzeo.com'),
new Array('미친개네 집','http://allzza.net/maddog'),
new Array('태그 매니아','http://tagmania.net'),
new Array('오마이 뉴스','http://ohmynews.com')
); //여기에서 추가하면 되죠... 그대신 맨마지막엔 , <--이것을 적으면 안되요.
new Array('카테고리',''),
new Array('엔지오','http://nzeo.com'),
new Array('미친개네 집','http://allzza.net/maddog'),
new Array('태그 매니아','http://tagmania.net'),
new Array('오마이 뉴스','http://ohmynews.com'),
new Array('ZipShin 홈페이지','http://zipshin.cafe2.net')
); -
유지호
2003.02.19 10:52
저... 여러 개를 쓰려면 어떻게 해야하나요...ㅡ.ㅡ? -
nasty
2003.02.19 12:40
정말 유용해요T_T 편하게 잘 쓰고 있어요♬ -
미친개
2003.02.20 09:50
유지호 //
메뉴 추가하고 레이어 수정하는것이 귀찮을듯 해서 레이어 부분은 document.write
함수로 뿌려주는 방식을 썼는데요
유지호님이 원하시는 다중 셀렉트 메뉴식으로 쓰시려면 레이어 관련 부분을 document.write
함수로 뿌려주면 힘들듯 하군요.
어제 님의 질문을 보고 소스를 한번 수정해볼까 했지만 자꾸 에러만 나네요
위 소스의 레이어 관련 부분을 직접 문서에 레이어 작성을 해주고
함수 부분에 인자를 추가해서(최소한 네개 정도가 되어야....) 그 인자로 레이어를 가동하는....
물론 셀렉트 메뉴 갯수만큼 menu 배열도 그 갯수가 되어야 할겁니다 menu_list, menu_list1.....
(배열 요소의 갯수가 아닌 배열의 갯수)
당근 레이어도 추가 해야 하는것이구요. -
유지호
2003.02.21 00:05
미친개//답변 감사합니다^^;; -
켄지
2003.02.27 11:21
대충 색깔을 흰색으로 해봤어요.
잘쓸게엽 MADDOG 님
<style type='text/css'>
body
A:link { text-decoration:none;font-size:12px; color: navy;}
A:visited { text-decoration:none;font-size:12px; color: navy;}
A:active { text-decoration:none;font-size:12px; color: navy;}
A:hover {color: 0000ff;font-size:12px; text-decoration:none;}
</style>
<script>
/*******************************
제작 : 미친개
이멜 : maddog07@korea.com
홈피 : http://allzza.net/maddog
날짜 : 2003.2.18
********************************/
var sel_menu = 0;
var menu_list = new Array(
/*******************************************
메뉴 추가할땐
new Array('추가 메뉴 이름','주소')
의 형태로 추가 하세요. 맨뒤에 추가할때 지금 현재 맨뒷 메뉴 뒤에 없는 쉼표(,)를 적어주고
새로 추가된 맨뒷 메뉴 뒤엔 쉼표가 없어야 합니다.
맨 첫 메뉴는 select 메뉴가 아무것도 선택 되지 않았을때 보여질 문자열입니다.
*********************************************/
new Array('카테고리',''),
new Array('엔지오','http://nzeo.com'),
new Array('미친개네 집','http://allzza.net/maddog'),
new Array('태그 매니아','http://tagmania.net'),
new Array('오마이 뉴스','http://ohmynews.com')
);
var mytarget = '_new'; //-- target 이름
function view_sub(sel_menu) {
document.all.sub_my2.style.visibility = 'visible';
document.all.sub_my.innerHTML = '<table width=100% bgcolor=ffffff style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[sel_menu][0] + '</td><td width=20% align=center><a href='javascript:hidden_sub(' + sel_menu + ')'>▲</a></td></tr></table>';
}
function hidden_sub(sel_menu) {
document.all.sub_my2.style.visibility = 'hidden';
document.all.sub_my.innerHTML = '<table width=100% bgcolor=ffffff style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[sel_menu][0] + '</td><td width=20% align=center><a href='javascript:view_sub(' + sel_menu + ')'+ '>▼</a></td></tr></table>';
if(sel_menu != 0) window.open(menu_list[sel_menu][1],mytarget,'');
}
for(i=0;i<menu_list.length;i++) {
if(i == 0) {
document.write('<div id=sub_my style="width:150;border:1 solid #000000;font-size:12px;color:navy">'
+ '<table width=100% bgcolor=ffffff style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">'
+ '<tr><td width=80% height=18>' + menu_list[i][0] + '</td><td width=20% align=center><a href='javascript:view_sub(' + i + ')'>▼</a></td>'
+ '</tr></table></div>'
+ '<div id=sub_my2 style="width:150;border-left:1 solid #000000;border-right:1 solid #000000;border-bottom:1 solid #000000;font-size:12px;color:navy;visibility:hidden">'
+ '<table width=100% bgcolor=ffffff style="padding-top:2;padding-left:4;padding-bottom:0;font-size:12px;color:navy">');
}
else {
document.write('<tr><td width=100% height=18 onmouseover='this.style.backgroundColor="cccccc"' onmouseout='this.style.backgroundColor="ffffff"'><a href='javascript:hidden_sub(' + i + ')'>' + menu_list[i][0] + '</a></td></tr>');
}
}
document.write('</table></div>');
</script>
제목 | 글쓴이 | 날짜 |
---|---|---|
주민등록번호를 받아 자동으로 폼에 생일, 성별 체크해주기 [4] | jugug | 2003.03.06 |
자바스크립트로 만든 로또추첨기~ ^^ | 행복한고니 | 2003.03.05 |
다음 로그인 폼 입니다... 로그인후 원하는 곳으로!! [3] | 정성교 | 2003.03.05 |
허접하나마... 플래쉬와 동영상 받는 소스... [2] | 꽃ちゃん | 2003.03.04 |
자바스크립트로 쪼물딱 거리는 배경 이미지 [3] | 미친개 | 2003.03.02 |
즐겨찾기 추가하기 [3] | 라엘 | 2003.03.01 |
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] | 이남두 | 2003.02.26 |
두군데 IFRAME 위치에 내용 동시출력하기-프레임에도 가능 [4] | 깜보 | 2003.02.22 |
MS홈에 쓰이는 오른쪽메뉴 툴바 [13] | Kortion | 2003.02.22 |
개판 오분전 이미지 슬라이더 [5] | 미친개 | 2003.02.20 |
통합 검색엔진 소스입니다. [5] | 철혈단 | 2003.02.19 |
폰트 크기를 방문자가 자유자재로 바꾸도록.. | 깜보 | 2003.02.19 |
개판 오분전 select menu......... [10] | 미친개 | 2003.02.18 |
[수정 및 추가 설명] 음악 듣기 소스 [4] | 당근당근 | 2003.02.17 |
페이지 로딩중 효과 [7] | 깜보 | 2003.02.16 |
[수정판] 갤러리 이미지 드레그 이동 가능한 필터 사용 스르륵 버젼 ^^ [10] | 모라미 | 2003.02.15 |
요청해오신 레이어 무조건 중앙에 열리기 와 클릭하는 곳에 열리기 두가지 소스입니다. [4] | 모라미 | 2003.02.25 |
레이어를 이용한 초간단 갤러리를 만들어봅시다. [6] | 모라미 | 2003.02.15 |
흐르는 내용 강좌 [4] | 라엘 | 2003.02.10 |
[허뎝이즈]간단한 테트리스 만들어 보기^_^[허뎝이 수정했음돠] [11] | 허졉이즈 | 2003.02.06 |
그런데 인터넷익스플로러 몇부터 적용되나요?