SHsoft-쇼핑몰창업, 무료쇼핑몰--JAVASCRIPT 게시판

본문 바로가기
JAVASCRIPT
개발자를 위한 온라인 커뮤니티  
HOME > JAVASCRIPT

 

JAVASCRIPT
JQUERY 이용한 메뉴 풀다운 show animate
작성자 : 관리자
조회 : 485
등록일 : 2016-02-04 (211.169.138.253) , 추천 : 0

JQUERY 이용한 메뉴 풀다운 show  animate

JQUERY 이용한 메뉴 풀다운 show  animate

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

 

 

<!-- 스티일시트(디지인) 시작 (여기서 수정하시면 됩니다.) -->

<style>

 

@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

html {overflow-y:scroll}

body {margin:0;padding:0;background:#ffffff;color:#5a5a5a;font-size:0.75em;font-family:'Nanum Gothic', 'dotum', serif;}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}

header ul, nav ul, aside ul, footer ul {margin:0;padding:0;list-style:none}

p {margin:0;padding:0 0 10px;line-height:1.7em;word-break:break-all}

hr {display:none}

 

a {color:#000;text-decoration:none}

a:focus, a:hover, a:active {text-decoration:underline}

 

ul,li {margin:0;padding:0;list-style:none;display: inline;}

 

 

#header_category {width:100%; height:50px;}

#goods_category {width:100%; height:100%; float:left; text-align:center;}

#goods_category li {display:inline-block; padding: 0 10px 0 10px; text-align:right;  font-family: 'Jeju Gothic', 'dotum', serif; font-size:1.25em;}

 

/* 메뉴 네비 */

.sub_menu {width:100%; float: left;background: #f9f9f9; position: relative; z-index: 2000;border-bottom: 1px solid #d7d7d7;border-top: 1px solid #d7d7d7; height: 0px; text-align:center;}

.all_cate_ul {float: left; width:120px; min-height:80px;text-align:left;}

.all_cate1 {width:100%; padding: 5px 0 5px;color:#808080; font-weight:bold; }

.all_cate2 {width:100%; padding: 2px 0 2px 10px;color:#808080;}

.all_cate3 {width:100%; padding: 2px 0 2px 20px;color:#c0c0c0;}

</style>

<!-- 스티일시트(디지인) 끝 -->

 

 

<body>

<p></p><p></p>

<!-- 상품분류 시작 -->

<div id="header_category">

<ul id="goods_category">

<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 class=""><a href="javascript:category_all_show();">전체메뉴</a></li>

</ul>

</div>

<!-- 상품분류 끝 -->

 

 

 

 

<!-- 전체 상품분류 시작 -->

<div class="sub_menu" style="display:none;">

<div style="width:1100px;padding-left:20px;margin: 0 auto; position: relative; text-align:center; background:#ffff33;">

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 패션의류 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 패션잡화 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 화장품/미용 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 디지털/가전 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 가구/인테리어 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 출산/육아 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 식품 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 스프츠/레져 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

<ul class='all_cate_ul'>

<li>

<div class='all_cate1'><a href='1'> 생활/건강 </a></div>

<div class='all_cate2'><a href='11&depth=2'> 여성의류 </a></div>

<div class='all_cate2'><a href='12&depth=2'> 남성의류 </a></div>

</li>

</ul>

</div>

</div>

<!-- 전체 상품분류 끝 -->

 

<div class="line_1px"></div>

 

 

 

<!-- 전체 상품분류 자바스크립트 시작 -->

<script type="text/javascript">

function category_all_show(){

if($(".sub_menu").css("height") == '0px'){

$(".sub_menu").show("slide", { direction: "down" }, 500);;

$( ".sub_menu" ).animate({ "height": "200px" }, "slow" );

}else{

$( ".sub_menu" ).animate({ "height": "0px" }, "slow" );

$(".sub_menu").hide("slide", { direction: "up" }, 1000);;

}

}

</script>

</body>

 

 

 

[샘플 보기]








 

 

 

 



 

 

JAVASCRIPT 목록
이름 내용 등록일
댓글(comment)
* 표시가 있는 부분은 필수 입력 사항입니다.
JAVASCRIPT
*
*
비밀글
* 웹에디터 시작
상호 : 123 | 대표 : 윤상현 | 팩스 : 123-123-123 | 개인정보책임자 : =]]]]]
이메일 : ganja@gmail.com | 사업자 등록번호 : 125-40-00023 | 주소 : You Are HACKED BY Secundu =]]]]]]
Copyright © 2015 123 All rights reserved.