이전
목록
다음
M

오늘은 뭐 짜달라, 고쳐달라는 분도 안 계시고,

cshop
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-07-08 (일) 01:17:31 · 4499 · 1
어제 다평정님을 위해 짜드렸던 드랍다운 예제에 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 를 불러와야죠.  이렇게.

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 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 부분에서의 오류 때문입니다. ㅠㅠ
#퍼블리셔팁 #퍼블리셔 #팁자료실 #html
|

댓글 1개

다다평정
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-07-08 (일) 19:39:09
팁 감사합니다~ㅋㅋㅋㅠㅠ
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-07-14 조회 5,444
13-07-14 조회 5,416
13-07-14 조회 4,700
13-07-14 조회 4,308
13-07-14 조회 4,169
13-07-14 조회 4,226
13-07-14 조회 4,948
13-07-14 조회 4,592
13-07-14 조회 4,378
13-07-14 조회 5,418
13-07-14 조회 5,303
13-07-14 조회 5,070
13-07-14 조회 4,792
13-07-14 조회 5,475
13-07-13 조회 3,749
13-07-01 조회 5,759
13-07-01 조회 5,843
13-07-01 조회 3,927
13-07-01 조회 5,421
13-05-27 조회 3,997
13-05-21 조회 5,035
13-05-02 조회 1만
13-04-29 조회 5,237
13-04-15 조회 5,496
13-04-13 조회 6,430
13-02-27 조회 4,102
13-02-26 조회 6,505
13-02-12 조회 5,242
13-02-01 조회 2.3만
13-01-23 조회 3,537
13-01-09 조회 8,035
13-01-07 조회 4,956
13-01-07 조회 3,713
13-01-04 조회 1.3만
13-01-03 조회 1.2만
12-12-31 조회 6,381
12-12-27 조회 4,500
12-12-27 조회 4,196
12-12-27 조회 8,867
12-12-18 조회 3,683
12-12-12 조회 3,727
12-12-12 조회 6,757
12-12-12 조회 8,171
12-12-05 조회 5,458
12-12-01 조회 6,748
12-11-22 조회 4,667
12-11-09 조회 5,519
12-11-09 조회 7,584
12-10-29 조회 4,804
12-10-16 조회 6,357
12-10-09 조회 5,425
12-09-02 조회 4,521
12-09-01 조회 3,643
12-08-30 조회 4,292
12-08-30 조회 4,289
12-08-28 조회 3,626
12-08-21 조회 7,213
12-08-20 조회 3,735
12-08-18 조회 5,143
12-08-18 조회 3,508
12-08-11 조회 3,674
12-08-09 조회 3,835
12-08-07 조회 3,818
12-08-07 조회 4,396
12-08-01 조회 4,643
12-08-01 조회 4,520
12-07-20 조회 9,892
12-07-17 조회 4,258
12-07-15 조회 4,006
12-07-10 조회 4,293
12-07-09 조회 6,999
12-07-05 조회 3,324
12-07-04 조회 3,498
12-06-30 조회 5,737
12-06-28 조회 3,832
12-06-20 조회 3,979
12-06-16 조회 3,288
12-06-14 조회 3,941
12-06-07 조회 3,966
12-06-06 조회 6,324
12-05-27 조회 4,537
12-05-25 조회 3,287
12-05-25 조회 3,106
12-05-24 조회 3,241
12-05-24 조회 4,585
12-05-23 조회 3,944
12-05-22 조회 6,574
12-05-15 조회 3,958
12-05-15 조회 3,666
12-05-14 조회 3,102
12-05-12 조회 3,552
12-05-11 조회 7,052
12-05-07 조회 4,476
12-04-28 조회 3,683
12-04-25 조회 5,327
12-04-15 조회 3,913
12-04-12 조회 4,744
12-04-11 조회 3,504
12-04-08 조회 3,354
12-03-21 조회 6,413
글쓰기