자바스크립트| 라이센스요청(안내) 주문제작 | 질문답변| 팁앤태크| 강좌 | 설문
 
 
  포인트안내 | 입금통보 | 제이쿼리 라이센스안내
오늘 : 181 명 | 어제 : 289 명 | 현재 : 17 명
 
[공지사항] 4월 출첵이벤트 (1)
+ 강좌 +
- 부족하지만 아는선에서 이제 시작하는 분들께 조금 도움이 될까 하여 작성해 보았습니다
- 댓글남겨주시면 힘이 되고 남기신 글 모두 확인되니 필요한 경우 답변 받을 수 있습니다
 
작성일 : 13-06-13 02:45
제목 [자바스크립트] css text and img menu , ir , javascript menu
작성자 디블
조회수 7,571    http://designblack.com/jquery/study/jquery04.html [1024]

간단하게 쓰일 수 있는 메뉴형태를 몇가지 구현해 보았습니다.
단순한 형태로 쉽게 적용가능하며 분석도 쉬우니 참고해 보세요

-css 을 이용한 텍스트메뉴

a:hover 을 이용해 롤오버를 구현하였습니다.
텍스트메뉴에 많이 적용되는 형태입니다.


css 을 이용한 이미지메뉴(ir기법)

ir기법의 정확한 의미는 모르겠지만...한장의 이미지로 대체한다는 의미같습니다.
예제에선 온오프메뉴이미지를 메뉴당 한장으로 구성을 하였으나 실무에선 전체메뉴를 또는 페이지내 모든 이미지를 한장에 담아 배경처리하고 배경을 움직여 원하는 이미지가 보이도록 처리합니다.


javascript 메뉴
자바스크립트 메뉴라고 하긴 그렇습니다.
이미지에 자바스크립트 이벤트를 바로 붙여 직관적으로 이미지를 변경합니다.
<img src="아웃이미지" onmouseover="this.src='오버이미지'"  onmouseout="this.src='아웃이미지'" /> 

예제를 확인하세요

맥스a 13-11-04 10:24
좋은정보 감사합니다.
꿈꾸는날개 14-03-09 23:47
좋은 정보 감사합니다.
하군 14-03-13 23:16
예제보니 바로 이해가 되네요 ^^
밤톨이언니 14-05-28 20:39
자바스크립트 메뉴 감사합니다. 도움이 많이 되었습니다. 다시한번 감사합니다.^^
다니엘lee 14-06-11 23:41
깔끔한 정리 감사합니다.
하군 14-11-16 00:24
정말 유용한 소스네요.. 감사합니다 ^^
녀사님 14-12-01 11:23
이런 강좌가 있다니, 너무 좋으네요! 감사합니다
낭낭 14-12-04 15:43
오 유용하네요 감사합니다
이링링 14-12-13 08:29
감사합니다 ^^
phantom 15-01-22 09:14
와. 고맙습니다
김종우 15-01-30 10:40
좋은정보 감사합니다.
길수사랑 15-02-17 01:37
좋은정보 감사합니다.
프리지아 16-04-16 16:57
좋은 정보 감사합니다.
프리지아 16-06-23 00:25
좋은 정보 감사합니다.
유화 16-09-17 13:29
좋은 정보 감사합니다.
우주왕따상… 17-01-26 04:29
좋은 정보 감사합니다.
하림부 17-02-08 20:31
아~ 이런것이 있었군요.
뚜꼬맘 17-09-21 18:14
오..강좌가잇는지 첨알았어요 ㅎㅎ! 좋은 정보 감사합니다
미스터진 19-02-18 14:31
css로도 가능하네요 감사합니다~

 
Total 76
글번호 제목 작성자 작성날짜 조회수
초보는 초보가 가르쳐야 잘 가르친다...ㅋㄷ (66) 디블 04-27 12721
76 [자바스크립트] css text and img menu , ir , javascript menu (19) 디블 06-13 7572
75 [자바스크립트] 제이쿼리 셀렉트, css , bind (9) 디블 06-12 7827
74 [자바스크립트] 제이쿼리 시작 (2) 디블 06-10 7459
73 [자바스크립트] jquery(제이쿼리)를 위한 기초 스타일 (9) 디블 06-10 7527
72 [자바스크립트] 표준코딩? 비표준코딩? (5) 디블 06-04 7198
71 [자바스크립트] jquery(제이쿼리)? (4) 디블 06-01 7146
70 [플래시] 3.0_contextMenu (3) 디블 07-22 7688
69 [플래시] 3.0_php (11) 디블 06-22 5047
68 [플래시] 3.0_xml (10) 디블 06-18 5086
67 [플래시] 3.0_imgSkew (5) 디블 06-18 2651
66 [플래시] 3.0_textFormat (1) 디블 06-18 2924
65 [플래시] 3.0_loadMovie (6) 디블 06-18 3457
64 [플래시] 3.0_tween (2) 디블 06-17 2837
63 [플래시] 3.0_link (1) 디블 06-17 2700
62 [플래시] 3.0_hitTest (1) 디블 06-17 3496
 1  2  3  4  5  6  
디자인블랙 | 공세헌 | 부산 해운대구 중동 달맞이경동메르빌 104동 1607호 | 010-4577-5965
메일 : designblack@nate.com : 네이트온 : 10~18시
사업자등록번호 605-22-56543 | 통신판매신고 제 2008-부산진-0178호 | 이용약관
농협 : 177506-51-008469 : 공세헌