miniwini.com
집크기 30 pixel 줄이기 집크기 원래대로 집크기 30 pixel 늘리기
포토갤러리
데스크탑갤러리
버그 때려잡자



자유게시판
질문&답변
알짜게시판
로그인
멤버가입
Alzza
알짜게시판입니다. :D
도움이 될 만한 정보는 자신있게 포스팅! :)
ALL
HOT
xynex...
마우스오버 드롭다운 메뉴(jQuery) 7442 views , 16 Comments
eond.com [+]
(xynex) 슈퍼쿠니
LEV42 EXP83577 xynex's stats
며칠간 끙끙끙대며 질게와 알릭님을 괴롭혔던 그 마우스오버 드롭다운 메뉴입니다.
jQuery를 이용합니다. 개인적으로 XE를 사용하는데 저 jquery-latest.js 파일이 없으면 안되네요.
제가 잘못 알아들었는지도 모르겠습니다만 bathory님께서 XE는 jQuery가 기본적으로 들어가있는 거라 하셔서
그냥 코드만 쓰면 되는 건지 알았는데 저 jQuery-latest.js 파일도 꼭 같이 넣어줘야 하네요.
A simple show-submenu-on-hover-menu라고 하는데 XE에 애드센스가 3개 들어가있으니 어쩔 수 없나 보네요.
http://eond.com 메뉴에 활용해보았습니다만 이렇게 간단한 코드를 가지고도 원하는대로 디자인하려니 쉽지 않네요. ;

Cookbook / Navigation
A simple show-submenu-on-hover-menu.
http://docs.jquery.com/Cookbook/Navigation
preview viewsource copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { var toggle = function(direction, display) { return function() { var self = this; var ul = $("ul", this); if( ul.css("display") == display && !self["block" + direction] ) { self["block" + direction] = true; ul["slide" + direction]("slow", function() { self["block" + direction] = false; }); } }; } $("li.menu").hover(toggle("Down", "none"), toggle("Up", "block")); $("li.menu ul").hide(); }); </script> </head> <body> <ul id="menu"> <li class="menu">Sub 1 <ul> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 4</li> </ul> </li> <li class="menu">Sub 2 <ul> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 4</li> </ul> </li> </ul> </body> </html>
내사랑너의사랑 사랑해요 미니위니~
다들 잘 살고 계신가요~ 저는 별일 없이 잘 삽니다. 다들 잘 사세요~
Posted at 2009/2/11, 9:51 am
Edited by xynex at 2009/2/12, 1:42 pm (2)

(jangi) 2009-02-11, 11:02 AM
IE7 에서 테스트 하신 건가요?
전... 뭔가 화면이 잘 안 보여요..
(xynex) 2009-02-11, 11:16 AM
저는 잘 되던데.. 파이어폭스, 크롬, IE6에서 체크해봤습니다. IE7은 설치를 안해서 확인해보지 않았습니다.
(y12x21) 2009-02-11, 01:45 PM
IE7 FF3에서 잘 되네요.
css에서 ul의 폭을 좀 조절해야겠어요.
"miniwiniHelper"IE7 FF3에서 잘 되네요. css에서 ul의 폭을 좀 조절해야겠어요."/miniwiniHelper"
(xynex) 2009-02-11, 01:56 PM
제 홈페이지 말씀이시죠? 좀 좁나요?; 20px 떨어뜨리면 되려나요;;
"miniwiniHelper"제 홈페이지 말씀이시죠? 좀 좁나요?; 20px 떨어뜨리면 되려나요;;"/miniwiniHelper"
nalireco (nalireco) 2009-02-11, 01:59 PM
웹마에서 드롭다운메뉴 테이블이 깨지네요.
(jangi) 2009-02-11, 05:58 PM
한자 교육에 붙이며 .. 는 한자 교육에 부쳐.. 로 고치는 게 나을 듯합니다. ^^
"miniwiniHelper"한자 교육에 붙이며 .. 는 한자 교육에 부쳐.. 로 고치는 게 나을 듯합니다. ^^"/miniwiniHelper"
(xeon) 2009-02-11, 06:37 PM
서브메뉴 섹션별 링크가 너무 붙어있어서 가독성이 떨어지네요.

제 생각에도 폭 조절 하는 편이 훨씬 보기 좋을 것 같아요.
"miniwiniHelper"서브메뉴 섹션별 링크가 너무 붙어있어서 가독성이 떨어지네요. 제 생각에도 폭 조절 하는 편이 훨씬 보기 좋을 것 같아요."/miniwiniHelper"
(xynex) 2009-02-11, 06:50 PM
제 홈페이지 말씀이시죠? ^^; 왼쪽,가운데, 오른쪽 3분할 되는데 IE6 이하에선 전체를 감싸서 너비를 정해주면 될 듯 한데
가변폭이라 삽질만 하다 어떻게 할지 몰라 그냥 저렇게라도 놔두었습니다. 제 홈페이지 문제고 기본 스크립트가 깨지거나 하지는 않습니다. ^^;
(xynex) 2009-02-11, 06:51 PM
네 감사합니다. ^^; 메뉴 스크립트만 완성한 거라서 디자인은 아직 못했는데 말씀해주신대로 그렇게 하면 좋겠네요. ^^
메뉴가 너무 많다 보니깐 스크립트 상에서도 2줄 표현이 어렵고 해서 어떻게든 줄여보고자 구분선 없이 나열했는데 보기가 불편하네요. 
Edited by xynex on 2009/02/11 06:55 PM
(xynex) 2009-02-11, 06:53 PM
잘못 썼나 보네요. ^^;; 고치겠습니다. 하도 옛날에 썼던 것이라 잘 찾아보지도 않았는데, 사이트맵으로 전개해놓으니깐 그런 오점도 쉽게 알 수 있군요;; ㅎ
ephesian (qkrwogks2) 2009-02-12, 11:52 AM
ie7에서 한번 번쩍거리거든요 (?) 저만 그런가...
어쨌든 정말 예쁜 기능이네요. ㅎㅎ
앵겨 (come2mecome) 2009-02-12, 01:20 PM
IE6에서는 좀 심하게 번쩍이네요....특히 마우스 아웃됐을때...
"miniwiniHelper"IE6에서는 좀 심하게 번쩍이네요....특히 마우스 아웃됐을때..."/miniwiniHelper"
(xynex) 2009-02-12, 01:43 PM
DTD 선언을 안해줬더니 그랬습니다. 미리보기 코드 제대로 적었으니 봐주세요. ^^;;;
"miniwiniHelper"DTD 선언을 안해줬더니 그랬습니다. 미리보기 코드 제대로 적었으니 봐주세요. ^^;;;"/miniwiniHelper"
(xynex) 2009-02-12, 01:46 PM
http://eond.com/test2
DTD 선언을 똑바로 했을 때는 이렇게 이쁘답니다 ^^;;
"miniwiniHelper"http://eond.com/test2 DTD 선언을 똑바로 했을 때는 이렇게 이쁘답니다 ^^;;"/miniwiniHelper"
(litbe) 2009-02-12, 09:13 PM
오 좋은데요.......^^
(xynex) 2009-02-13, 12:05 AM
XE와 충돌 일어나는 부분에 대해서 말씀드릴게요. XE에는 기본적으로 jQuery 라이브러리가 삽입되는데
위 스크립트의 jQuery 버전은 1.3.x 일 겁니다.
위에 코드에서도 보시다시피 삽입되는 자바스크립트의 파일명이 jQuery-latest.js 파일인데요.
최근 jQuery 라이브러리입니다.
반면에 XE는 common/js/ 폴더에 보면 jQuery 파일이 있는데요, 버전이 달라요.
제가 듣기로는 12일날 발표되는 XE 1.2에는 jQuery가 안정적이고 빠르고 가벼운;; 최신 버전으로 교체가 된다고 하는데요,
그 때 한 번 더 사용해볼려고요.

저 코드 그대로 사용하려하시거든 해당 레이아웃의 XE에서는 몇몇 부분이 작동 안되는 부분이 있습니다,
그래서 저는 admin 화면으로 넘어가서 작업해서 집어넣든가, 필요한 작업할 때는 레이아웃에서 jQuery-latest_.js 이런 식으로 파일명을 고쳐서 작업하기도 하고..
아직은 번거롭죠^^;
"miniwiniHelper"XE와 충돌 일어나는 부분에 대해서 말씀드릴게요. XE에는 기본적으로 jQuery 라이브러리가 삽입되는데 위 스크립트의 jQuery 버전은 1.3.x 일 겁니다. 위에 코드에서도 보시다시피 삽입되는 자바스크립트의 파일명이 jQuery-latest.js 파일인데요. 최근 jQuery 라이브러리입니다. 반면에 XE는 common/js/ 폴더에 보면 jQuery 파일이 있는데요, 버전이 달라요. 제가 듣기로는 12일날 발표되는 XE 1.2에는 jQuery가 안정적이고 빠르고 가벼운;; 최신 버전으로 교체가 된다고 하는데요, 그 때 한 번 더 사용해볼려고요. 저 코드 그대로 사용하려하시거든 해당 레이아웃의 XE에서는 몇몇 부분이 작동 안되는 부분이 있습니다, 그래서 저는 admin 화면으로 넘어가서 작업해서 집어넣든가, 필요한 작업할 때는 레이아웃에서 jQuery-latest_.js 이런 식으로 파일명을 고쳐서 작업하기도 하고.. 아직은 번거롭죠^^;"/miniwiniHelper"
ALL
PAGE 15
HOT
xynex...
모노로그입니다.. ^^ [11] 4945 2/22, 5:43 pm
한국정보보호진흥원에서 기업을 위한 정보보호 가이드 ... [10] 2685 2/22, 12:33 am
대구 교보문고/핫트랙스 이용시 일리 커피 1잔 증정 [3] 2114 2/20, 2:29 pm
고속도로 긴급견인 무료서비스 (☏1588-2505) [11] 3402 2/17, 2:40 am
매년 잊고 버리는 이통사 멤버쉽 할인을 꼭 받으세요. [6] 3699 2/17, 1:38 am
유세윤 1.0 [18] 6475 2/16, 4:53 am
파파로티 이벤트 " 영화 구세주 2 " 시사회권을 드립니다. [11] 2097 2/15, 1:43 am
쓸데없는 툴;; [21] 5172 2/12, 1:24 am
jjang 케이스로직 제품 사용하시는분! [9] 2461 2/12, 10:00 am
포토스케이프(PhotoScape) 사진편집프로그램 [6] 3638 2/11, 8:44 pm
javascript로 그림 그리기 2 [9] 3978 2/11, 6:33 pm
마우스오버 드롭다운 메뉴(jQuery) [16] 7442 2/11, 9:51 am
2090 바이러스 백신 나왔습니다. :) [2] 3321 2/11, 2:21 am
예전에 Play Street 기억하시나요? 이제 다시 시작합니... [22] 3517 2/9, 2:21 pm
네이버 개발자 코딩체 업데이트 v1.65 [5] 4244 2/6, 4:01 pm
ephesian 한국정보보호진흥원 - 홈페이지 보안 강화도구(CASTLE)... [3] 3131 2/6, 3:39 pm
쪽빛바다돌핀 일정시간마다 컴퓨터 사용시간 알림이(음성) 만들어보았... [6] 3214 2/5, 10:03 pm
모여라꿈동산 TypoEnter 튤립체를 공개했네요~ [5] 3540 2/3, 7:35 pm
허허이거참 4개의창을쓰는 탐색기 [5] 3420 2/3, 6:26 pm
ipuris 밑에 웹메신져 알짜포스팅이 있길래 저도... [3] 2551 2/3, 11:34 am
5401 topics / 15 of 271 pages
 10  11  12  13  14  15  16  17  18  19  20 
검색
제목 내용 작성자
EXP 순위

PRINT-FRIENDLY PAGE
© 2002-2013 by miniwini.com | E-mail