간단한 서브메뉴 onmouseover 이벤트 팁
- 서론 : 자유게시판의 요엘아빠님의 글에서 소스와 예제를 원하시는 분이 계셔서 이렇게 여기에 올립니다
:: 간단한 소개 ::
저는 요번 메뉴를 웹표준에 맞게 제작하여서 실제론 <div>, <ul>, <li> 소스만 사용하였
습니다. 또한 이에 맞게 CSS 스타일도 입혀주었습니다. 아래 예제들은 제일 간단하게 제작되었습니다.
저는 요번 메뉴를 웹표준에 맞게 제작하여서 실제론 <div>, <ul>, <li> 소스만 사용하였
습니다. 또한 이에 맞게 CSS 스타일도 입혀주었습니다. 아래 예제들은 제일 간단하게 제작되었습니다.
>> 이미지 활용
:: CSS (스타일시트) ::
설명 : 서브메뉴는 기본적으로 display 속성을 none 으로 맞춰줍니다. 그리고 이미지에는 <a> 태그를 사용하지 않을 경우로 포인터 속성을 입혀주었습니다.
#submenu_1 { display:none }
#submenu_2 { display:none }
#mainmenu_img { cursor:pointer; border:0; }
설명 : 서브메뉴는 기본적으로 display 속성을 none 으로 맞춰줍니다. 그리고 이미지에는 <a> 태그를 사용하지 않을 경우로 포인터 속성을 입혀주었습니다.
#submenu_1 { display:none }
#submenu_2 { display:none }
#mainmenu_img { cursor:pointer; border:0; }
:: 자바스크립트 ::
var save_layer = null;
function submenu_viewer(menu_id, opt)
{
if (save_layer != null)
save_layer.style.display = "none";
if (opt == 'hide')
{
if (save_layer != null)
save_layer.style.display = "none";
} else {
var menu = document.getElementById(menu_id);
menu.style.display = 'block';
}
save_layer = menu;
}
var save_layer = null;
function submenu_viewer(menu_id, opt)
{
if (save_layer != null)
save_layer.style.display = "none";
if (opt == 'hide')
{
if (save_layer != null)
save_layer.style.display = "none";
} else {
var menu = document.getElementById(menu_id);
menu.style.display = 'block';
}
save_layer = menu;
}
:: HTML 소스 ::
설명 : 이미지 사용시 <a>를 사용하지 않는 가정하에 포인터라는 속성을 입혀주며, 링크를 입혀줘도 상관없도록 하게 만들었습니다. 또한 onmouseover 안에 보시면 submenu_viewer의 첫번째 값은 서브메뉴의 아이디값을 넣어주시면 됩니다. 특히 첫 소스에서 'null' 을 뜻하는건 조건을 넘기지 않는 것이며, 두번째 값은 'hide'와 'view'가 있는데, 만일 서브메뉴를 보고싶을시에는 view를 넣어주시면 되시고, 만일 보여진 서브메뉴를 없앨려면 'hide'를 쓰시면 됩니다.
1. 이미지 사용시
<div name="mainmenu">
<img src="소스" id="mainmenu_img" onmouseover="submenu_viewer('null', 'hide');">
<img src="메인메뉴1" id="mainmenu_img" onmouseover="submenu_viewer('submenu_1', 'view');">
<img src="메인메뉴2" id="mainmenu_img" onmouseover="submenu_viewer('submenu_2', 'view');">
</div>
2. 텍스트 사용시
<div name="mainmenu">
<a href="링크" onmouseover="submenu_viewer('null', 'hide');">인덱스</a>
<a href="메인메뉴1" onmouseover="submenu_viewer('submenu_1', 'view');">메인메뉴1</a>
<a href="메인메뉴2" onmouseover="submenu_viewer('submenu_2', 'view');">메인메뉴2</a>
3. 서브메뉴 소스
<div id="submenu_1">어쩌구저쩌구</div>
<div id="submenu_2">어쩌구 저쩌구</div>
설명 : 이미지 사용시 <a>를 사용하지 않는 가정하에 포인터라는 속성을 입혀주며, 링크를 입혀줘도 상관없도록 하게 만들었습니다. 또한 onmouseover 안에 보시면 submenu_viewer의 첫번째 값은 서브메뉴의 아이디값을 넣어주시면 됩니다. 특히 첫 소스에서 'null' 을 뜻하는건 조건을 넘기지 않는 것이며, 두번째 값은 'hide'와 'view'가 있는데, 만일 서브메뉴를 보고싶을시에는 view를 넣어주시면 되시고, 만일 보여진 서브메뉴를 없앨려면 'hide'를 쓰시면 됩니다.
1. 이미지 사용시
<div name="mainmenu">
<img src="소스" id="mainmenu_img" onmouseover="submenu_viewer('null', 'hide');">
<img src="메인메뉴1" id="mainmenu_img" onmouseover="submenu_viewer('submenu_1', 'view');">
<img src="메인메뉴2" id="mainmenu_img" onmouseover="submenu_viewer('submenu_2', 'view');">
</div>
2. 텍스트 사용시
<div name="mainmenu">
<a href="링크" onmouseover="submenu_viewer('null', 'hide');">인덱스</a>
<a href="메인메뉴1" onmouseover="submenu_viewer('submenu_1', 'view');">메인메뉴1</a>
<a href="메인메뉴2" onmouseover="submenu_viewer('submenu_2', 'view');">메인메뉴2</a>
3. 서브메뉴 소스
<div id="submenu_1">어쩌구저쩌구</div>
<div id="submenu_2">어쩌구 저쩌구</div>
갑자기 요청하셔가지고 설명이 좀 복잡한데요...
더 물어보실게 있다면 쪽지를 이용해주시면 감사하겠습니다 ^^
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
댓글 7개
terrorboys
17년 전
감사드립니다.^^
17년 전
좋은 소스입니다~ 감사합니다~~
17년 전
감사합니다..
그런데 혹시 쿠키를 기억할 수 있도록 할 수 있는 방법은 없을까요??
특정 메뉴에 가면 그 메뉴들이 활성화가 되게 하고 싶어서요..ㅠㅠ
그런데 혹시 쿠키를 기억할 수 있도록 할 수 있는 방법은 없을까요??
특정 메뉴에 가면 그 메뉴들이 활성화가 되게 하고 싶어서요..ㅠㅠ
16년 전
근데 마우스 올라 갈시에는 그밑으로 서부메뉴가 나오게 하자면 어덯게 하죠?
16년 전
메뉴
나와같다면
16년 전
onmouseout 이 없는데...
넣을수 없을까요???
넣을수 없을까요???
15년 전
메뉴
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2930 |
마케팅메지션
|
15년 전 | 965 | |
| 2929 |
마케팅메지션
|
15년 전 | 925 | |
| 2928 | 15년 전 | 1056 | ||
| 2927 | 15년 전 | 850 | ||
| 2926 | 15년 전 | 852 | ||
| 2925 | 15년 전 | 748 | ||
| 2924 | 15년 전 | 4489 | ||
| 2923 |
VBASP
|
15년 전 | 953 | |
| 2922 |
프리랜서개발자
|
15년 전 | 663 | |
| 2921 | 15년 전 | 1075 | ||
| 2920 | 15년 전 | 1042 | ||
| 2919 | 15년 전 | 1173 | ||
| 2918 | 15년 전 | 848 | ||
| 2917 | 15년 전 | 979 | ||
| 2916 |
마케팅메지션
|
15년 전 | 964 | |
| 2915 | 15년 전 | 918 | ||
| 2914 |
 Kiiru |
15년 전 | 802 | |
| 2913 | 15년 전 | 866 | ||
| 2912 | 15년 전 | 987 | ||
| 2911 |
Kiiru |
15년 전 | 799 | |
| 2910 |
Kiiru |
15년 전 | 799 | |
| 2909 |
 신현종실장 |
15년 전 | 887 | |
| 2908 | 15년 전 | 807 | ||
| 2907 | 15년 전 | 783 | ||
| 2906 | 15년 전 | 801 | ||
| 2905 | 15년 전 | 794 | ||
| 2904 | 15년 전 | 811 | ||
| 2903 | 15년 전 | 752 | ||
| 2902 | 15년 전 | 765 | ||
| 2901 | 15년 전 | 740 | ||
| 2900 | 15년 전 | 964 | ||
| 2899 | 15년 전 | 898 | ||
| 2898 | 15년 전 | 757 | ||
| 2897 |
Kiiru |
15년 전 | 781 | |
| 2896 | 15년 전 | 705 | ||
| 2895 |
 Terrorboys |
15년 전 | 1876 | |
| 2894 | 15년 전 | 924 | ||
| 2893 | 15년 전 | 719 | ||
| 2892 | 15년 전 | 866 | ||
| 2891 | 15년 전 | 761 | ||
| 2890 |
 iwebstory |
15년 전 | 897 | |
| 2889 | 15년 전 | 766 | ||
| 2888 |
iwebstory |
15년 전 | 865 | |
| 2887 | 15년 전 | 821 | ||
| 2886 | 15년 전 | 742 | ||
| 2885 | 15년 전 | 906 | ||
| 2884 | 15년 전 | 700 | ||
| 2883 |
마케팅메지션
|
15년 전 | 846 | |
| 2882 |
마케팅메지션
|
15년 전 | 900 | |
| 2881 | 15년 전 | 1191 | ||
| 2880 |
마케팅메지션
|
15년 전 | 779 | |
| 2879 | 15년 전 | 831 | ||
| 2878 | 15년 전 | 864 | ||
| 2877 |
라디오켓츠
|
15년 전 | 1439 | |
| 2876 |
Kiiru |
15년 전 | 805 | |
| 2875 | 15년 전 | 958 | ||
| 2874 | 15년 전 | 1361 | ||
| 2873 | 15년 전 | 823 | ||
| 2872 |
Kiiru |
15년 전 | 832 | |
| 2871 |
Kiiru |
15년 전 | 725 | |
| 2870 | 15년 전 | 773 | ||
| 2869 |
마케팅메지션
|
15년 전 | 756 | |
| 2868 | 15년 전 | 1935 | ||
| 2867 |
Terrorboys |
15년 전 | 862 | |
| 2866 | 15년 전 | 899 | ||
| 2865 | 15년 전 | 819 | ||
| 2864 | 15년 전 | 1295 | ||
| 2863 | 15년 전 | 1207 | ||
| 2862 |
Kiiru |
15년 전 | 843 | |
| 2861 | 15년 전 | 781 | ||
| 2860 | 15년 전 | 1073 | ||
| 2859 |
Kiiru |
15년 전 | 649 | |
| 2858 |
Kiiru |
15년 전 | 735 | |
| 2857 |
Kiiru |
15년 전 | 793 | |
| 2856 |
마케팅메지션
|
15년 전 | 758 | |
| 2855 |
마케팅메지션
|
15년 전 | 709 | |
| 2854 | 15년 전 | 967 | ||
| 2853 | 15년 전 | 798 | ||
| 2852 |
신현종실장 |
15년 전 | 766 | |
| 2851 | 15년 전 | 712 | ||
| 2850 | 15년 전 | 807 | ||
| 2849 | 15년 전 | 2444 | ||
| 2848 |
Mentor
|
15년 전 | 795 | |
| 2847 |
마케팅메지션
|
15년 전 | 773 | |
| 2846 | 15년 전 | 778 | ||
| 2845 | 15년 전 | 754 | ||
| 2844 | 15년 전 | 970 | ||
| 2843 |
마케팅메지션
|
15년 전 | 700 | |
| 2842 | 15년 전 | 1040 | ||
| 2841 | 15년 전 | 825 | ||
| 2840 | 15년 전 | 838 | ||
| 2839 | 15년 전 | 1136 | ||
| 2838 | 15년 전 | 732 | ||
| 2837 | 15년 전 | 771 | ||
| 2836 | 15년 전 | 660 | ||
| 2835 |
마케팅메지션
|
15년 전 | 840 | |
| 2834 |
마케팅메지션
|
15년 전 | 665 | |
| 2833 |
신현종실장 |
15년 전 | 1120 | |
| 2832 |
신현종실장 |
15년 전 | 793 | |
| 2831 |
Mentor
|
15년 전 | 767 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기