728x90
반응형
위로 슬라이드 되며 펼쳐지는 메뉴를 만드는 방법입니다.
사이트 하단에 '관련 사이트' 링크 리스트를 만들 때에 사용할 수 있습니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2. HTML
<div class="family_menu">
<button class="btn_family">관련 사이트 <span class="ico_up"></span></button>
<div class="family_list">
<a href="#">관련 사이트 1</a>
<a href="#">관련 사이트 2</a>
<a href="#">관련 사이트 3</a>
</div>
</div>
3. CSS
.family_menu { position: relative; display: inline-block; *display: inline; *zoom: 1; }
.btn_family { height: 45px; padding: 0 30px 0 15px; background: #fff; border: 1px solid #333; font-size: 15px; color: #000; cursor: pointer; }
.family_list { width: 125px; position: absolute; bottom: 46px; background: #eee; display: none; }
.family_list a { padding: 12px; text-decoration: none; font-size: 15px; color: #000; display: block; }
.family_list a:hover { font-weight: bold; }
.btn_family .ico_up { position: absolute; top: 21px; right: 15px; width: 0px; height: 0px; border-top: 0 solid none; border-bottom: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.btn_family .ico_down {position: absolute; top: 21px; right: 15px; width: 0px; height: 0px; border-top: 5px solid #000; border-bottom: 0 solid none; border-left: 5px solid transparent; border-right: 5px solid transparent; }
4. jQuery
$(document).ready(function(){
$(".btn_family").click(function(){
$(".family_list").slideToggle(function(){
if($(".btn_family span").hasClass("ico_up")){
$(".btn_family span").removeClass("ico_up");
$(".btn_family span").addClass("ico_down");
}else{
$(".btn_family span").addClass("ico_up");
$(".btn_family span").removeClass("ico_down");
}
});
});
});
728x90