어제 다평정님을 위해 짜드렸던 드랍다운 예제에 jQuery 효과를 하나 넣어보도록 하겠습니다.
어제 예제는 마우스 오버 (hover) 시 하위메뉴가 펼쳐지는데, 이게 툭하고 나타나니 퉁명스럽죠. 이걸 부드럽게 나타내는 효과를 넣어 보도록 하겠습니다.
어제는 css 에서 display: none 으로 감춰져 있다가 마우스 오버시 (hover) 이 감춰진게 보여지도록 했는데, 여기에 css transition 효과를 넣으면, 이걸 부드럽게 나타다도록 보여지게 할수 있지만, 빌어먹을 IE 땜에, 이 효과를 IE 에서도 보여지게 해주려면 jQuery 를 사용하는 수 밖에 없습니다.
css 에 display: none 이 어떤 element 을 감춘다면 jQuery 에서는 이걸 .hide 로 표현합니다.
이런식으로
$('ul').hide(); //ul 야, 넌 숨어있어
그리고 어제는 css 에서 마우스 오버시 display: block 이렇게 해서 숨겨졌던걸 보여지게 했는데,
jQuery 에서는 이 숨겨진 element 를 이런식으로
$('ul').show(); //ul 야, 이제 튀어나와
합니다.
그런데 이걸 부드럽게 보여지게 하려면 .show 대신 .fadeIn, 과 .fadeOut, 혹은 .fadeTo 를 사용할 수 있습니다. (사실 animate 과 opacity 도 이용할 수 있고, 방법은 무궁무진 합니다.)
어제와 같이 html 마크업이 이렇다고 했을때
<ul id="drop">
<li>
공지사항
<ul>
<li>하위메뉴</li>
</ul>
</li>
</ul>
1. 일단 jQuery 를 작성하려면 jQuery 를 불러와야죠. 이렇게.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
2. 그리고 jQuery 명령문은 이런식이 되겠죠.
$('ul ul').hide(); //숨어있어
$('ul#drop li').hover(function() { //마우스 오버하면
$(this).children('ul').fadeIn(); //부드럽게 튀어나와
}, function() {
$(this).children('ul').fadeOut(); //부드럽게 들어가
});
3. 그런데 이렇게 하면 다큐먼트가 준비되기전/윈도우가 로드되기전 (jQuery 를 어느 위치에 놓느냐에 따라) 먼저 fire 을 해버립니다. 그래서 document ready 나 window load 가 되면 작동해라, 라는 명령문으로 한번 더 감싸야 합니다. 이렇게.
$(window).load(function(){
.
jQuery 명령문
.
});
이러면 마우스 오버시 부드럽게 하위메뉴가 펼쳐지는 메뉴가 만들어 집니다. 끝. 무지 간단하죠?
아, 저 $ 싸인은 뭐냐구요? $ 는 이건 jQuery 다라고 말해 주는 겁니다. 그러니까 $ = jQuery 입니다.
4. jQuery 는 이렇게 생각보다 매우 쉽게 사용할 수 있고, 배우기가 아주 쉽습니다. toggle, animate, fade in 등의 명령어만 넣으면, 아코디언이니, 드랍다운 메뉴니, 기본적인건 뭐든 만들어 쓸수 있습니다. 디자이너라면 당연히 할수 있는 거고, 요구되는 것 입니다. (미국에서는)
이런 간단한 걸 할줄 모르니 퍼블리셔라는 직업군도 한국에는 있는 것 같은데, 사실 제대로 된 디자이너라면 html, css, jQuery 는 손위에 올려놓고 갖고 놀수 있어야 합니다. 어려운게 아니니까요. 퍼블리셔라는 직업군은, 미국이나 다른 나라에는 존재하지 않는 직업군 입니다.
제가 이런말을 한다고, 배려가 없느니, 무례하느니, 왜 몇몇분들이 열폭을 하시는지 저는 이해불가이지만, 서로 의견이 다름을 인지하고, 상식이 통하는 게시판이 되었으면 합니다.
다평정님이 또 "안돼요" 라고 댓글을 올리실까 제가 이제 아주 노이로제가 걸려서, 그냥 ctrl +c, v 하실수 있게, 전문을 작성했습니다. ㅠㅠ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>드랍다운</title>
<style>
li {
list-style-type:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(function() {
$('ul ul').hide(); //숨어있어
$('ul#drop li').hover(function() {
$(this).children('ul').fadeIn(); //부드럽게 튀어나와
}, function() {
$(this).children('ul').fadeOut(); //부드럽게 들어가
});
});
});
</script>
</head>
<body>
<ul id="drop">
<li>
공지사항
<ul>
<li>하위메뉴</li>
</ul>
</li>
</ul>
</body>
</html>
/////
*다평정님, 이것만 돌리시면 IE 에서나 크롬에서나 분명히 작동됩니다. 작동이 안되는 경우는, 다평정님께서 집어넣으신 다른 javascript 부분에서의 오류 때문입니다. ㅠㅠ
댓글 1개
13년 전
팁 감사합니다~ㅋㅋㅋㅠㅠ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7730 | 10년 전 | 1322 | ||
| 7729 | 10년 전 | 1176 | ||
| 7728 |
잘살아보자
|
10년 전 | 620 | |
| 7727 |
잘살아보자
|
10년 전 | 521 | |
| 7726 |
잘살아보자
|
10년 전 | 847 | |
| 7725 |
잘살아보자
|
10년 전 | 572 | |
| 7724 |
잘살아보자
|
10년 전 | 493 | |
| 7723 |
잘살아보자
|
10년 전 | 556 | |
| 7722 |
잘살아보자
|
10년 전 | 495 | |
| 7721 |
잘살아보자
|
10년 전 | 527 | |
| 7720 |
잘살아보자
|
10년 전 | 491 | |
| 7719 |
비긴어게인
|
10년 전 | 704 | |
| 7718 |
 JRevirthuum |
10년 전 | 2549 | |
| 7717 |
잘살아보자
|
10년 전 | 673 | |
| 7716 |
잘살아보자
|
10년 전 | 421 | |
| 7715 |
잘살아보자
|
10년 전 | 450 | |
| 7714 |
잘살아보자
|
10년 전 | 512 | |
| 7713 | 10년 전 | 1796 | ||
| 7712 | 10년 전 | 1732 | ||
| 7711 | 10년 전 | 1121 | ||
| 7710 | 10년 전 | 1414 | ||
| 7709 | 10년 전 | 1535 | ||
| 7708 | 10년 전 | 1475 | ||
| 7707 | 10년 전 | 867 | ||
| 7706 |
별지기천사
|
10년 전 | 583 | |
| 7705 | 10년 전 | 1087 | ||
| 7704 |
ICONdesignstudio
|
10년 전 | 644 | |
| 7703 | 10년 전 | 611 | ||
| 7702 |
 foxrain |
10년 전 | 747 | |
| 7701 | 10년 전 | 1436 | ||
| 7700 | 10년 전 | 1116 | ||
| 7699 | 10년 전 | 593 | ||
| 7698 | 10년 전 | 1163 | ||
| 7697 | 10년 전 | 5186 | ||
| 7696 | 10년 전 | 677 | ||
| 7695 | 10년 전 | 1700 | ||
| 7694 | 10년 전 | 1087 | ||
| 7693 | 10년 전 | 1575 | ||
| 7692 | 10년 전 | 1317 | ||
| 7691 | 10년 전 | 840 | ||
| 7690 | 10년 전 | 1405 | ||
| 7689 | 10년 전 | 1032 | ||
| 7688 | 10년 전 | 637 | ||
| 7687 |
파랑새1597
|
10년 전 | 621 | |
| 7686 | 10년 전 | 872 | ||
| 7685 | 10년 전 | 1355 | ||
| 7684 | 10년 전 | 812 | ||
| 7683 | 10년 전 | 1126 | ||
| 7682 | 10년 전 | 1039 | ||
| 7681 | 10년 전 | 688 | ||
| 7680 | 10년 전 | 1004 | ||
| 7679 | 10년 전 | 526 | ||
| 7678 | 10년 전 | 755 | ||
| 7677 | 10년 전 | 655 | ||
| 7676 |
JRevirthuum |
10년 전 | 962 | |
| 7675 |
JRevirthuum |
10년 전 | 1201 | |
| 7674 | 10년 전 | 1065 | ||
| 7673 | 10년 전 | 772 | ||
| 7672 | 10년 전 | 1111 | ||
| 7671 | 10년 전 | 922 | ||
| 7670 | 10년 전 | 686 | ||
| 7669 |
mashmellow
|
10년 전 | 1244 | |
| 7668 | 10년 전 | 732 | ||
| 7667 | 10년 전 | 1032 | ||
| 7666 |
senseme
|
10년 전 | 674 | |
| 7665 | 10년 전 | 527 | ||
| 7664 | 10년 전 | 1913 | ||
| 7663 |
mixx애교
|
10년 전 | 994 | |
| 7662 | 10년 전 | 1060 | ||
| 7661 |
hkhkah
|
10년 전 | 806 | |
| 7660 | 10년 전 | 1078 | ||
| 7659 |
커네드커네드
|
10년 전 | 949 | |
| 7658 |
바람돌이팡
|
10년 전 | 690 | |
| 7657 | 10년 전 | 1183 | ||
| 7656 | 10년 전 | 1597 | ||
| 7655 | 10년 전 | 1014 | ||
| 7654 |
개발짜증나
|
10년 전 | 871 | |
| 7653 |
네이비칼라
|
10년 전 | 896 | |
| 7652 |
밥먹고합시다
|
10년 전 | 821 | |
| 7651 |
플라이SINJI
|
10년 전 | 1524 | |
| 7650 |
개발짜증나
|
10년 전 | 1431 | |
| 7649 | 10년 전 | 471 | ||
| 7648 |
이미영ㅇㅇ
|
10년 전 | 887 | |
| 7647 | 10년 전 | 463 | ||
| 7646 | 10년 전 | 833 | ||
| 7645 | 10년 전 | 2341 | ||
| 7644 | 10년 전 | 842 | ||
| 7643 |
 돼지코구뇽 |
10년 전 | 2891 | |
| 7642 | 10년 전 | 1535 | ||
| 7641 | 10년 전 | 1153 | ||
| 7640 |
개발짜증나
|
10년 전 | 482 | |
| 7639 |
 AJFLDKVMEK |
10년 전 | 825 | |
| 7638 |
개발짜증나
|
10년 전 | 1151 | |
| 7637 | 10년 전 | 1573 | ||
| 7636 | 10년 전 | 2924 | ||
| 7635 | 10년 전 | 1719 | ||
| 7634 | 10년 전 | 1901 | ||
| 7633 | 10년 전 | 2366 | ||
| 7632 | 10년 전 | 3974 | ||
| 7631 |
JRevirthuum |
10년 전 | 1566 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기