이전
목록
다음
M

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

cshop
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-07-08 (일) 01:17:31 · 4453 · 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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
16-06-03 조회 2,792
15-07-30 조회 3,319
15-06-08 조회 5,465
15-05-27 조회 4,310
15-01-08 조회 6,582
14-12-30 조회 5,316
14-10-10 조회 5,281
14-08-13 조회 6,243
14-08-11 조회 5,063
14-08-06 조회 6,404
14-03-19 조회 7,332
13-04-26 조회 9,502
12-12-15 조회 5,040
12-12-15 조회 7,278
12-12-11 조회 5,380
12-11-21 조회 5,875
12-10-11 조회 4,986
12-10-03 조회 4,672
12-09-20 조회 6,011
12-09-02 조회 4,153
12-08-29 조회 5,097
12-08-29 조회 4,004
12-08-24 조회 4,123
12-08-18 조회 4,360
12-08-17 조회 4,396
12-08-16 조회 3,652
12-08-06 조회 5,416
12-08-05 조회 4,711
12-08-03 조회 4,442
12-08-03 조회 4,585
12-07-29 조회 3,419
12-07-24 조회 4,016
12-07-22 조회 3,508
12-07-20 조회 4,206
12-07-19 조회 4,596
12-07-19 조회 3,842
12-07-19 조회 3,793
12-07-19 조회 5,457
12-07-19 조회 3,402
12-07-18 조회 5,022
12-07-15 조회 4,000
12-07-14 조회 3,699
12-07-12 조회 4,411
12-07-11 조회 3,687
12-07-11 조회 3,395
12-07-11 조회 3,360
12-07-10 조회 4,538
12-07-09 조회 3,257
12-07-09 조회 4,126
12-07-09 조회 4,529
12-07-08 조회 4,454
12-07-07 조회 5,388
12-07-06 조회 4,658
12-07-06 조회 3,917
12-07-06 조회 3,776
12-07-06 조회 3,688
12-07-02 조회 5,394
12-07-02 조회 4,099
12-06-29 조회 3,592
12-06-28 조회 4,227
12-06-26 조회 3,717
12-06-26 조회 4,827
12-06-21 조회 3,794
12-06-20 조회 4,492
12-06-20 조회 4,110
12-06-15 조회 4,483
12-06-15 조회 4,238
12-06-13 조회 7,252
12-06-05 조회 7,224
12-06-04 조회 3,828
12-06-03 조회 3,674
12-05-31 조회 3,678
12-05-28 조회 6,502
12-05-27 조회 3,751
12-05-25 조회 3,897
12-05-23 조회 4,273
12-05-21 조회 5,004
12-05-17 조회 3,958
12-05-17 조회 3,875
12-05-09 조회 3,929
12-05-07 조회 4,175
12-05-02 조회 4,404
12-05-01 조회 4,575
12-04-30 조회 3,309
12-04-30 조회 4,268
12-04-25 조회 4,336
12-04-25 조회 4,767
12-04-24 조회 3,742
12-04-24 조회 4,512
12-04-23 조회 3,524
12-04-20 조회 3,158
12-04-17 조회 5,352
12-04-16 조회 4,277
12-04-14 조회 3,562
12-04-14 조회 3,602
12-04-14 조회 3,654
12-04-13 조회 3,284
12-04-13 조회 4,465
12-04-13 조회 6,068
12-04-12 조회 3,230
글쓰기