Copy
<style>/* UI Object *//* Common */body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}img,fieldset{border:0}ul,ol{list-style:none}em,address{font-style:normal}a{text-decoration:none}a:hover,a:active,a:focus{text-decoration:underline} .cate_view_all{position:relative;width:959px;padding-top:3px;border-bottom:1px solid #c9c9c9;background:url(http://static.naver.com/kin/09renewal/bg_main_category.gif) repeat-x 0 0;margin:0 auto;} .cate_view_all h3{border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;font-size:11px}.cate_view_all h3 a{display:block;position:relative;width:957px;height:24px;padding:15px 0 0 15px}.cate_view_all h3 a span{display:block;position:absolute;top:12px;left:14px;width:103px;height:17px;background:url(http://static.naver.com/kin/09renewal/h_category_all.gif) no-repeat;cursor:pointer;}.cate_view_all .cate_list{z-index:9999;position:absolute;display:none;padding-top:21px;padding-bottom:26px;border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;border-bottom:1px solid #c9c9c9;background:#fff}.cate_view_all .cate_list ul{overflow:hidden;clear:both;width:957px;background:url(http://static.naver.com/kin/09renewal/bg_main_cate_list.gif) repeat-y 149px 21px;}.cate_view_all .cate_list li{float:left;width:136px;padding-left:15px;}.cate_view_all .cate_list li h4{padding-bottom:14px;font-family:'나눔고딕';font-weight:bold;font-size:13px;letter-spacing:-0.1em;}.cate_view_all .cate_list li ul{width:100%;background:none}.cate_view_all .cate_list li ul li{padding:0 0 6px;}.cate_view_all .cate_list li ul li a{color:#777}.cate_view_all .cate_list li.right{width:135px;background:url(http://static.naver.com/kin/09renewal/bg_main_cate_list.gif) repeat-y 0px 21px;padding-bottom:10px}.cate_view_all_open h3{border-bottom:1px solid #e0e0e0}.cate_view_all_open h3 a span{background-position:0 -17px;}.cate_view_all_open .cate_list{display:block}/* //UI Object */</style> <!-- UI Object --><!-- [D] 전체보기 열면 cate_view_all_open 클래스가 추가되어야 함 --><div class="cate_view_all"> <h3><a href="#">카테고리 전체보기<span></span></a></h3> <div class="cate_list"> <ul> <li> <h4>책상</h4> <ul> <li><a href="#">사무용책상(일자형)</a></li> <li><a href="#">퍼즐형책상(ㄱ자형)</a></li> <li><a href="#">중역용책상</a></li> <li><a href="#">중역용책상(실속형)</a></li> <li><a href="#">임원용책상</a></li> <li><a href="#">유리/가죽디자인책상</a></li> <li><a href="#">교육/학원/세미나책상</a></li> <li><a href="#">컴퓨터책상</a></li> <li><a href="#">이동서랍</a></li> <li><a href="#">책상보조테이블</a></li> <li><a href="#">가정용책상</a></li> <li><a href="#">실험실/기숙사</a></li> </ul> </li> <li> <h4>의자</h4> <ul> <li><a href="#">사무용의자</a></li> <li><a href="#">메쉬사무용의자</a></li> <li><a href="#">중역용의자/실속형<br>(10만원대)</a></li> <li><a href="#">중역용의자/고급형</a></li> <li><a href="#">디자인사무용의자</a></li> <li><a href="#">침대형의자</a></li> <li><a href="#">로비/대기용 장의자</a></li> <li><a href="#">연수/수강/접의자</a></li> <li><a href="#">병원/진찰용환의자</a></li> <li><a href="#">하이팩/보조/좌식의자</a></li> <li><a href="#">회의용의자</a></li> <li><a href="#">메쉬회의용의자</a></li> <li><a href="#">중역회의용의자</a></li> </ul> </li> <li> <h4>책장</h4> <ul> <li><a href="#">OA책장[2/3/4/5/6단]</a></li> <li><a href="#">고급형중역책장</a></li> <li><a href="#">서재용책장</a></li> <li><a href="#">OA락카장/사물함<br>(주문제작가능)</a></li> <li><a href="#">철재락카/사물함</a></li> <li><a href="#">철재디자인책장</a></li> <li><a href="#">크레덴쟈/문갑</a></li> </ul> </li> <li> <h4>회의용테이블</h4> <ul> <li><a href="#">OA회의용테이블</a></li> <li><a href="#">중역용테이블</a></li> <li><a href="#">연결형테이블</a></li> <li><a href="#">유리&가죽테이블</a></li> <li><a href="#">학원&연수용테이블</a></li> <li><a href="#">중역원형테이블</a></li> <li><a href="#">OA원형테이블</a></li> <li><a href="#">유리원형테이블</a></li> </ul> </li> <li> <h4>파티션</h4> <ul> <li><a href="#">45T기본형/스크린</a></li> <li><a href="#">45/60T 고급형 파티션</a></li> <li><a href="#">컬러우드파티션</a></li> <li><a href="#">우드 파티션</a></li> <li><a href="#">맥스 컬러파티션</a></li> <li><a href="#">60T 블럭파티션</a></li> <li><a href="#">65T 블럭파티션</a></li> <li><a href="#">60T 블럭그릴 파티션</a></li> <li><a href="#">60T 알류미늄 파티션</a></li> <li><a href="#">30T 시트파티션</a></li> <li><a href="#">아크릴 파티션</a></li> <li><a href="#">목제 칸막이</a></li> <li><a href="#">부품 및 기타</a></li> <li><a href="#">파티션 색상표</a></li> <li><a href="#">파티션 레이아웃</a></li> </ul> </li> <li class="right"> <h4>인테리어</h4> <ul> <li><a href="#">인테리어 의자</a></li> <li><a href="#">인테리어 소파</a></li> <li><a href="#">보조/스툴디자인의자</a></li> <li><a href="#">빠텐의자</a></li> <li><a href="#">디자인테이블</a></li> <li><a href="#">야외용가구</a></li> </ul> </li> <li class="right"> <h4>옷장</h4> <ul> <li><a href="#">목제옷장</a></li> <li><a href="#">철제옷장</a></li> </ul> </li> </ul> </div></div><!-- //UI Object --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">jQuery(function($){ $('h3>a').click(function(){ $('.cate_view_all').toggleClass('cate_view_all_open'); });});</script>
이 소스를 사용중입니다.
클릭시 전체메뉴가 내려오고 다시 클릭시 전체메뉴가 사라지고 있습니다.
그냥 마우스 오버시 메뉴가 열리고
마우스를 화면 다른곳에 가져가면 닫히게 하고 싶습니다.
답변 1개 / 댓글 1개
채택된 답변
+20 포인트
9년 전
Copy
$("h3>a").on("mouseenter", function() { $(".cate_view_all").addClass("cate_view_all_open");}); $("div.cate_list").on("mouseleave", function() { $(".cate_view_all").removeClass("cate_view_all_open");});
이걸 jQuery(function($) {}); 이 안에 넣으시면 될 것 같네요.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.