반응형 오른쪽 메뉴

<script>

$(document).ready(function(){

$(".menu_open").click(function(){

if($(this).hasClass('on')){

$("#menus").stop().slideUp();

$(this).removeClass('on');

}else{

$("#menus").slideDown();

$(this).addClass('on');

}

});

});

</script>

<style>

#menus{background:#ffffff;position:absolute;top:126px;right:0;z-index:999;width:263px;display:none;}

.menus{background:#ffffff;}

.menus_title{position:relative;background:url('../images/main/menu_bag.gif') no-repeat;padding:20px 0 0 10px;height:113px;}

.menus_title > p{color:#ffffff;font-size:14px;line-height:20px;padding-bottom:12px;}

.menus_cent{}

.menus_one > li > a{display:block;font-size:18px;color:#6f6e6e;border-bottom:1px solid #d6d6d6;line-height:46px;padding-left:28px;}

</style>

<div id="menus" style="display: block;">

<div class="menus">

<div class="menus_cent">

<ul class="menus_one">

<li><a href="/edu/eduIntro.do">정보화교육 소개</a></li>

<li><a href="/edu/eduSchedule.do">강좌 및 신청안내</a></li>

<li><a href="/edu/eduApplyList.do">강좌 신청</a></li>

<li><a href="/edu/eduApplyConfirm.do">신청/이수 확인</a></li>

<li><a href="/edu/user/portal/bbs/selectBoardList.do?bbsId=BBSMSTR_000000000211">공지사항</a></li>

<li><a href="/edu/user/portal/bbs/selectBoardList.do?bbsId=BBSMSTR_000000001357">자료실</a></li>

</ul>

</div>

</div>

</div>

<a class="menu_open on" href="#"><img src="/edu/open_content/images/common/menu_open.gif" alt=""></a>