오늘은 뭐 짜달라, 고쳐달라는 분도 안 계시고,
어제 다평정님을 위해 짜드렸던 드랍다운 예제에 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 부분에서의 오류 때문입니다. ㅠㅠ
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 1개