웹마스터 팁
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>
제목 | 글쓴이 | 날짜 |
---|---|---|
[PHP 동영상강의] 34. 자료를 수정해보자. [8] | 서기 | 2006.01.14 |
[PHP 동영상강의] 35. 사용자 정의함수의 사용 [8] | 서기 | 2006.01.16 |
[PHP 동영상강의] 36. 사용자 정의함수 심화학습 [8] | 서기 | 2006.01.21 |
[PHP 동영상강의] 37. 기본적인 페이징 처리하기 [7] | 서기 | 2006.01.21 |
[PHP 동영상강의] 38. 삭제시 비밀번호 물어보기 [6] | 서기 | 2006.01.26 |
[PHP 동영상강의] 39. 회원가입/로그인 처리 [8] | 서기 | 2006.02.06 |
[PHP 동영상강의] 40. 파일의 업로드 [7] | 서기 | 2006.02.27 |
[PHP 동영상강의] 41. 추천사이트(북마크)프로그램 만들기 [4] | 서기 | 2006.02.27 |
[PHP 동영상강의] 42. 세션의 사용 [4] | 서기 | 2006.03.02 |
[PHP 동영상강의] 43. 공용함수의 제작/쿠키로그인(보안) [4] | 서기 | 2006.03.16 |
[PHP 동영상강의] 44. 즐겨찾기 제작하기 [7] | 서기 | 2006.03.21 |
[PHP 동영상강의] 45. 우편번호 검색기 제작해보기 [12] | 서기 | 2006.03.30 |
[PHP 동영상강의] 46. 다중검색기 제작해보기 [8] | 서기 | 2006.04.06 |
유용한 PHP성능 개선을 위한 팁 [4] | 이태라 | 2006.04.11 |
네이버 openapi 사용하여 실시간 인기검색어 보여주기 [3] | 유창화 | 2006.04.13 |
네이버 openapi 사용하여 한국어사전 만들기 | 유창화 | 2006.04.13 |
네이버 openapi 사용하여 쇼핑검색 만들기 [3] | 유창화 | 2006.04.13 |
올블로그(http://www.allblog.net/Home/) 명예의 전당글 가져오기 [2] | 유창화 | 2006.04.17 |
올블로그 명예의 전당글 가져오기 (캐쉬기능추가) [2] | 유창화 | 2006.04.17 |
중복파일 검사 후 (숫자)달기... [4] | 한치근 | 2006.04.20 |
그런데 인터넷익스플로러 몇부터 적용되나요?