어제 다평정님을 위해 짜드렸던 드랍다운 예제에 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년 전
팁 감사합니다~ㅋㅋㅋㅠㅠ
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 8230 | 9년 전 | 41 | ||
| 8229 | 9년 전 | 50 | ||
| 8228 |
커네드커네드
|
9년 전 | 93 | |
| 8227 | 9년 전 | 103 | ||
| 8226 | 9년 전 | 141 | ||
| 8225 | 9년 전 | 131 | ||
| 8224 | 9년 전 | 127 | ||
| 8223 | 9년 전 | 87 | ||
| 8222 |
 웹표준3년차 |
9년 전 | 161 | |
| 8221 | 9년 전 | 77 | ||
| 8220 | 9년 전 | 71 | ||
| 8219 | 9년 전 | 75 | ||
| 8218 | 9년 전 | 110 | ||
| 8217 |
star3840
|
9년 전 | 94 | |
| 8216 | 9년 전 | 130 | ||
| 8215 | 9년 전 | 83 | ||
| 8214 | 9년 전 | 202 | ||
| 8213 | 9년 전 | 140 | ||
| 8212 | 9년 전 | 54 | ||
| 8211 | 9년 전 | 219 | ||
| 8210 | 9년 전 | 212 | ||
| 8209 | 9년 전 | 315 | ||
| 8208 | 9년 전 | 181 | ||
| 8207 | 9년 전 | 196 | ||
| 8206 |
 웹의미래는딥러닝 |
9년 전 | 157 | |
| 8205 | 9년 전 | 143 | ||
| 8204 | 9년 전 | 106 | ||
| 8203 | 9년 전 | 197 | ||
| 8202 | 9년 전 | 123 | ||
| 8201 | 9년 전 | 161 | ||
| 8200 | 9년 전 | 129 | ||
| 8199 | 9년 전 | 176 | ||
| 8198 | 9년 전 | 151 | ||
| 8197 | 9년 전 | 130 | ||
| 8196 | 9년 전 | 510 | ||
| 8195 | 9년 전 | 133 | ||
| 8194 | 9년 전 | 262 | ||
| 8193 | 9년 전 | 129 | ||
| 8192 | 9년 전 | 158 | ||
| 8191 | 9년 전 | 115 | ||
| 8190 | 9년 전 | 108 | ||
| 8189 | 9년 전 | 162 | ||
| 8188 | 9년 전 | 103 | ||
| 8187 | 9년 전 | 119 | ||
| 8186 | 9년 전 | 128 | ||
| 8185 | 9년 전 | 289 | ||
| 8184 | 9년 전 | 82 | ||
| 8183 | 9년 전 | 305 | ||
| 8182 | 9년 전 | 136 | ||
| 8181 | 9년 전 | 108 | ||
| 8180 | 9년 전 | 673 | ||
| 8179 | 9년 전 | 471 | ||
| 8178 | 9년 전 | 275 | ||
| 8177 |
kiplayer
|
9년 전 | 282 | |
| 8176 | 9년 전 | 322 | ||
| 8175 | 9년 전 | 203 | ||
| 8174 | 9년 전 | 210 | ||
| 8173 | 9년 전 | 321 | ||
| 8172 | 9년 전 | 163 | ||
| 8171 | 9년 전 | 159 | ||
| 8170 | 9년 전 | 274 | ||
| 8169 |
커네드커네드
|
9년 전 | 240 | |
| 8168 | 9년 전 | 293 | ||
| 8167 | 9년 전 | 300 | ||
| 8166 | 9년 전 | 211 | ||
| 8165 | 9년 전 | 144 | ||
| 8164 | 9년 전 | 274 | ||
| 8163 | 9년 전 | 264 | ||
| 8162 | 9년 전 | 270 | ||
| 8161 | 9년 전 | 269 | ||
| 8160 |
 성격파탄자 |
9년 전 | 465 | |
| 8159 | 9년 전 | 380 | ||
| 8158 | 9년 전 | 197 | ||
| 8157 | 9년 전 | 336 | ||
| 8156 | 9년 전 | 253 | ||
| 8155 | 9년 전 | 231 | ||
| 8154 |
00년생용띠
|
9년 전 | 574 | |
| 8153 | 9년 전 | 203 | ||
| 8152 |
 닉네임없음 |
9년 전 | 379 | |
| 8151 | 9년 전 | 381 | ||
| 8150 | 9년 전 | 472 | ||
| 8149 |
Jangfolk
|
9년 전 | 313 | |
| 8148 | 9년 전 | 146 | ||
| 8147 | 9년 전 | 353 | ||
| 8146 | 9년 전 | 408 | ||
| 8145 | 9년 전 | 334 | ||
| 8144 | 9년 전 | 302 | ||
| 8143 | 9년 전 | 156 | ||
| 8142 | 9년 전 | 404 | ||
| 8141 | 9년 전 | 353 | ||
| 8140 | 9년 전 | 900 | ||
| 8139 | 9년 전 | 226 | ||
| 8138 |
전갈자리남자
|
9년 전 | 366 | |
| 8137 | 9년 전 | 346 | ||
| 8136 | 9년 전 | 713 | ||
| 8135 |
|
9년 전 | 761 | |
| 8134 |
PlayPixel
|
9년 전 | 475 | |
| 8133 |
 돼지코구뇽 |
9년 전 | 416 | |
| 8132 | 9년 전 | 428 | ||
| 8131 | 9년 전 | 783 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기