타이머 팝업 메인메뉴 슬라이드 애니메이트 초기화

<script language="JavaScript">

var SetTime = 3; // 최초 설정 시간(기본 : 초)

function msg_time() { // 1초씩 카운트

m = Math.floor(SetTime / 60) + "분 " + (SetTime % 60) + "초"; // 남은 시간 계산

var msg = "현재 남은 시간은 <font color='red'>" + m + "</font> 입니다.";

document.all.ViewTimer.innerHTML = msg; // div 영역에 보여줌 

SetTime--; // 1초씩 감소

if (SetTime < 0) { // 시간이 종료 되었으면..

clearInterval(tid); // 타이머 해제

//alert("종료");

setTimeout('alert("종료");',1);

}

}

window.onload = function TimerStart(){ tid=setInterval('msg_time();',1000) };

window.open('test/pop','tpop1','width=600,height=500');

</script>

<div id="ViewTimer"></div>

<style type="text/css">

#logo {display:inline-block;}

ul.gnb_02 {}

ul.gnb_02 li{display:inline-block;}

#slidebar_wrap{clear:both;}

ul.slidebar_menu > li{display:inline-block;vertical-align:top;}

ul.sublist li{}

</style>

<script type="text/javascript">

$(function(){

var slideTimeout;

$('.menuCont').on('mouseover', function () {

$("#slidebar_wrap:not(:animated)").slideDown("fast", function () {

slideTimeout = setTimeout(function(){autoSlide();}, 5000);

});

}).on('mouseleave', function () {

$("#slidebar_wrap:not(:animated)").slideUp("fast");

clearTimeout(slideTimeout);

});

});

function autoSlide() {

if(!$(".menuCont").is(":hover")) {

$("#slidebar_wrap:not(:animated)").slideUp("fast");

}

}

</script>

<div class="menuCont" style="width:100%;     border-bottom: solid 2px #f47321;">

<div style="width:1000px;margin:0 auto;">

<div id="logo">

<a class="alt" href="https://www.dasaranghope.or.kr/" style="display: block;"><img src="https://www.dasaranghope.or.kr/asset/images/logo_01.png"></a></div>

<div id="gnb" style="width:100%;height:100%;">

<ul class="gnb_02">

<li class="gnb gnb_02_01 nav-control" data-nav="about"><h2><a href="https://www.dasaranghope.or.kr/about/greeting">기관소개</a></h2></li>

<li class="gnb gnb_02_02 nav-control" data-nav="campaign"><h2><a href="https://www.dasaranghope.or.kr/campaign/about">캠페인</a></h2></li>

<li class="gnb gnb_02_03 nav-control" data-nav="story"><h2><a href="https://www.dasaranghope.or.kr/story/internal">스토리</a></h2></li>

<li class="gnb gnb_02_04 nav-control" data-nav="donate"><h2><a href="https://www.dasaranghope.or.kr/donate">후원안내</a></h2></li>

<li class="gnb gnb_02_05 nav-control" data-nav="community"><h2><a href="https://www.dasaranghope.or.kr/community/notice">커뮤니티</a></h2></li>

<li class="gnb mypage_gnb nav-control" data-nav="mypage"><h2 style="background:#f47321;border-radius:15px;"><a style="font-size:16px;font-weight:bold;color:#ffffff;font-family: 'Nanum Barun Gothic';" href="https://www.dasaranghope.or.kr/mypage/mydonate" data-nav="mypage">나의다사랑</a></h2></li>

</ul>

</div>

</div>

<div id="slidebar_wrap" style="border-bottom: 0px solid rgb(244, 115, 33); display: none;">

<div style="width:1000px;margin:0 auto;">

<div class="slidebar_group">

<ul class="slidebar_menu">

<li>

<div class="slidebar_menu_00"></div>

</li>

<li>

<ul class="sublist slidebar_menu_01" style="background: none;">

<li id="menu01_02" style="background: none;"><a href="https://www.dasaranghope.or.kr/about/greeting" style="color: rgb(51, 51, 51);">인사말</a></li>

<li id="menu01_01" style="background: none;"><a href="https://www.dasaranghope.or.kr/about/campaign" style="color: rgb(51, 51, 51);">다사랑희망캠페인</a></li>

<li id="menu01_05" style="background: none;"><a href="https://www.dasaranghope.or.kr/about/partners" style="color: rgb(51, 51, 51);">홍보대사</a></li>

<li id="menu01_06" style="background: none;"><a href="https://www.dasaranghope.or.kr/about/map" style="color: rgb(51, 51, 51);">찾아오시는길</a></li>

</ul>

</li>

<li>

<ul class="sublist slidebar_menu_02" style="background: none;">

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/campaign/about" style="color: rgb(51, 51, 51);">캠페인 소개</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/campaign/camp/on/1" style="color: rgb(51, 51, 51);">진행중인 캠페인</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/campaign/camp/off/1" style="color: rgb(51, 51, 51);">종료된 캠페인</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/campaign/epilogue/1" style="color: rgb(51, 51, 51);">캠페인 후기</a></li>

</ul>

</li>

<li>

<ul class="sublist slidebar_menu_03" style="background: none;">

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/story/letter" style="color: rgb(51, 51, 51);">뉴스레터</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/story/internal" style="color: rgb(51, 51, 51);">국내 스토리</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/story/abroad" style="color: rgb(51, 51, 51);">해외 스토리</a></li>

</ul>

</li>

<li>

<ul class="sublist slidebar_menu_04" style="background: none;">

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/donate" style="color: rgb(51, 51, 51);">후원하기</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/donate/sponsor" style="color: rgb(51, 51, 51);">기업후원</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/donate/support" style="color: rgb(51, 51, 51);">물품후원</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/donate/volunteer" style="color: rgb(51, 51, 51);">자원봉사</a></li>

</ul>

</li>

<li>

<ul class="sublist slidebar_menu_05" style="background: none;">

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/community/notice" style="color: rgb(51, 51, 51);">공지사항</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/community/calendar" style="color: rgb(51, 51, 51);">행사표</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/community/report" style="color: rgb(51, 51, 51);">연차보고서</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/community/archive" style="color: rgb(51, 51, 51);">자료실</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/community/news" style="color: rgb(51, 51, 51);">보도자료</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/community/qna" style="color: rgb(51, 51, 51);">문의하기</a></li>

</ul>

</li>

<li>

<ul class="sublist slidebar_menu_06" style="background: none;">

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/mypage/profile" style="color: rgb(51, 51, 51);">개인정보변경</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/mypage/mydonate" style="color: rgb(51, 51, 51);">나의후원정보</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/mypage/myhistory" style="color: rgb(51, 51, 51);">나의참여내역</a></li>

<li style="background: none;"><a href="https://www.dasaranghope.or.kr/mypage/rcpt" style="color: rgb(51, 51, 51);">기부금영수증</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>