![[2021/12/27]국비지원 CSS3 8-(2) 탭메뉴, 퀵메뉴](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbgO4Mo%2Fbtrsc06FHcE%2FPxkyHb5br3CUPcrg4yOet0%2Fimg.jpg)
- 탭메뉴 ( 원본 O )
- 탭메뉴2 ( 원본 X )
- 탭메뉴2-1
- 탭메뉴2-2
- 탭메뉴2-3
- 퀵메뉴 ( 원본 O )
원본
▶ 기능 구현을 위해 제공 받은 js 코드 ◀
더보기
더보기
tab.js
function initTabMenu(tabContainerID){
var myList=document.getElementById(tabContainerID);
var myTab=myList.getElementsByTagName("dt");
var myDD=myList.getElementsByTagName("dd");
for(var i=0; i<myTab.length; i++){
myTab[i].children[0].onfocus=myTab[i].children[0].onclick=function(){
for(var k=0; k<myDD.length; k++){
myDD[k].style.display="none";
}
var theNext=this.parentNode.nextSibling;
if(theNext.nodeType==3) {theNext=theNext.nextSibling;}
theNext.style.display="block";
for(var k=0; k<myTab.length; k++){
var theTab=myTab[k].children[0].children[0];
theTab.src=theTab.src.replace("_over.gif","_out.gif");
}
this.children[0].src=this.children[0].src.replace("_out.gif","_over.gif");
}
}
}
1. 탭메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탭메뉴</title>
<script type="text/javascript" src="js/tab.js"></script>
<style type="text/css">
body,dl,dt,dd,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
li{list-style-type: none;}
img{border: none;}
a{color: #666;text-decoration: none;}
a:hover{color:#d06;text-decoration: underline;}
.tabMenu{width:350px;height:200px;margin: 10px;background: url(images/ta_bg.gif) repeat-x 0 0;position: relative;}
.tabMenu dt{float:left;margin-right: 2px;}
.tabMenu dd{position: absolute; left: 0;top: 26px;width:350px;padding-top: 10px;display: none;}
.tabMenu dd.menu1{display: block;}
.tabMenu dd li{background:url(images/tab_bul.gif) no-repeat 3px 50%;padding: 5px 0 5px 10px;
border-bottom: 1px solid #ccc;}
.tabMenu dd li span{position: absolute; right: 0;}
.tabMenu dd .more{position: absolute;right: 0;top: -30px;}
</style>
</head>
<body>
<!-- <h3 class="blind">공지사항, 입찰정보, 채용공고</h3>
<ul>
<li><a href="#">공지사항</a>
<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>
</ul>
<p><a href="#" title="공지사항 더보기">더보기</a></p>
</li>
<li><a href="#">입찰정보</a>
<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>
</ul>
</li>
<li><a href="#">채용공고</a>
<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>
</ul>
</li>
</ul> -->
<dl id="tabMenu" class="tabMenu">
<dt><a href="#"><img src="images/ta_1_over.gif" alt="공지사항"></a></dt>
<dd class="menu1">
<ul>
<li><a href="#">공지사항</a><span>2021-12-30</span></li>
<li><a href="#">공지사항</a><span>2021-12-30</span></li>
<li><a href="#">공지사항</a><span>2021-12-30</span></li>
<li><a href="#">공지사항</a><span>2021-12-30</span></li>
<li><a href="#">공지사항</a><span>2021-12-30</span></li>
</ul>
<p class="more"><a href="#"><img src="images/tab_more.gif" alt="공지사항 더보기"></a></p>
</dd>
<dt><a href="#"><img src="images/ta_2_out.gif" alt="입찰공고"></a></dt>
<dd>
<ul>
<li><a href="#">입찰공고</a><span>2021-12-30</span></li>
<li><a href="#">입찰공고</a><span>2021-12-30</span></li>
<li><a href="#">입찰공고</a><span>2021-12-30</span></li>
<li><a href="#">입찰공고</a><span>2021-12-30</span></li>
<li><a href="#">입찰공고</a><span>2021-12-30</span></li>
</ul>
<p class="more"><a href="#"><img src="images/tab_more.gif" alt="입찰공고 더보기"></a></p>
</dd>
<dt><a href="#"><img src="images/ta_3_out.gif" alt="채용공고"></a></dt>
<dd>
<ul>
<li><a href="#">채용공고</a><span>2021-12-30</span></li>
<li><a href="#">채용공고</a><span>2021-12-30</span></li>
<li><a href="#">채용공고</a><span>2021-12-30</span></li>
<li><a href="#">채용공고</a><span>2021-12-30</span></li>
<li><a href="#">채용공고</a><span>2021-12-30</span></li>
</ul>
<p class="more"><a href="#"><img src="images/tab_more.gif" alt="채용공고 더보기"></a></p>
</dd>
</dl>
<script type="text/javascript">
initTabMenu("tabMenu");
</script>
</body>
</html>
결과물
2. 탭메뉴2-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탭메뉴2</title>
<script type="text/javascript" src="js/tab.js"></Script>
<style type="text/css">
body,dl,dt,dd,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
li{list-style-type: none;}
img{border: none;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
.tabMenu2{width:280px;height: 470px;margin: 10px;background: yellow;position: relative;}
.tabMenu2 dt{float:left;margin-right: 3px;}
.tabMenu2 dd{position:absolute;left: 0;top:100px;}
</style>
</head>
<body>
<dl id="tabMenu2" class="tabMenu2">
<dt><a href="#" class="s01"><img src="images/webzine_s01.gif" alt="무지개천사04"></a></dt>
<dd class="l01">
<ul>
<li >
<img src="images/webzine_l01.gif" alt="무지개천사04">
</li>
</ul>
</dd>
<dt><a href="#" class="s02"><img src="images/webzine_s02.gif" alt="하늘에사람05"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l02.gif" alt="하늘에사람05">
</li>
</ul>
</dd>
<dt><a href="#" class="s03"><img src="images/webzine_s03.gif" alt="나무하트06"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l03.gif" alt="나무하트06">
</li>
</ul>
</dd>
<dt><a href="#" class="s04"><img src="images/webzine_s04.gif" alt="마녀07"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l04.gif" alt="마녀07">
</li>
</ul>
</dd>
</dl>
<script type="text/javascript">
initTabMenu("tabMenu2");
</script>
</body>
</html>
결과물
2. 탭메뉴2-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탭메뉴3</title>
<script type="text/javascript" src="js/tab.js"></script>
<style type="text/css">
body,dl,dt,dd,ul,li{margin: 0;padding: 0;}
li{list-style-type: none;}
img{border: none;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
.tabMenu3{height: 380px; margin: 10px;position: relative;}
.tabMenu3 dt{margin-right: 10px;}
.tabMenu3 dd{position:absolute; left: 80px;top:0;}
</style>
</head>
<body>
<dl id="tabMenu3" class="tabMenu3">
<dt><a href="#"><img src="images/webzine_s01.gif" alt="무지개천사04"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l01.gif" alt="무지개천사04">
</li>
</ul>
</dd>
<dt><a href="#"><img src="images/webzine_s02.gif" alt="하늘에사람05"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l02.gif" alt="하늘에사람05">
</li>
</ul>
</dd>
<dt><a href="#"><img src="images/webzine_s03.gif" alt="나무하트06"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l03.gif" alt="나무하트06">
</li>
</ul>
</dd>
<dt><a href="#"><img src="images/webzine_s04.gif" alt="마녀07"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l04.gif" alt="마녀07">
</li>
</ul>
</dd>
</dl>
<script type="text/javascript">
initTabMenu("tabMenu3");
</script>
</body>
</html>
결과물
2. 탭메뉴2-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탭메뉴3</title>
<script type="text/javascript" src="js/tab.js"></script>
<style type="text/css">
body,dl,dt,dd,ul,li{margin: 0;padding: 0;}
li{list-style-type: none;}
img{border: none;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
.tabMenu3{width: 150px; left: 20px; top:20px;position: relative;}
.tabMenu3 dt{float:left; padding: 3px;}
.tabMenu3 dd{position:absolute; left: 150px;top:0;}
</style>
</head>
<body>
<dl id="tabMenu3" class="tabMenu3">
<dt><a href="#"><img src="images/webzine_s01.gif" alt="무지개천사04"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l01.gif" alt="무지개천사04">
</li>
</ul>
</dd>
<dt><a href="#"><img src="images/webzine_s02.gif" alt="하늘에사람05"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l02.gif" alt="하늘에사람05">
</li>
</ul>
</dd>
<dt><a href="#"><img src="images/webzine_s03.gif" alt="나무하트06"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l03.gif" alt="나무하트06">
</li>
</ul>
</dd>
<dt><a href="#"><img src="images/webzine_s04.gif" alt="마녀07"></a></dt>
<dd>
<ul>
<li>
<img src="images/webzine_l04.gif" alt="마녀07">
</li>
</ul>
</dd>
</dl>
<script type="text/javascript">
initTabMenu("tabMenu3");
</script>
</body>
</html>
결과물
▶ 기능 구현을 위해 제공 받은 js 코드 ◀
더보기
더보기
scroll.js
function initMoving(target, position, topLimit, btmLimit) {
if (!target)
return false;
var obj = target;
obj.initTop = position;
obj.topLimit = topLimit;
obj.bottomLimit = document.documentElement.scrollHeight - btmLimit;
obj.style.position = "absolute";
obj.top = obj.initTop;
obj.left = obj.initLeft;
if (typeof(window.pageYOffset) == "number") {
obj.getTop = function() {
return window.pageYOffset;
}
} else if (typeof(document.documentElement.scrollTop) == "number") {
obj.getTop = function() {
return document.documentElement.scrollTop;
}
} else {
obj.getTop = function() {
return 0;
}
}
if (self.innerHeight) {
obj.getHeight = function() {
return self.innerHeight;
}
} else if(document.documentElement.clientHeight) {
obj.getHeight = function() {
return document.documentElement.clientHeight;
}
} else {
obj.getHeight = function() {
return 500;
}
}
obj.move = setInterval(function() {
if (obj.initTop > 0) {
pos = obj.getTop() + obj.initTop;
} else {
pos = obj.getTop() + obj.getHeight() + obj.initTop;
//pos = obj.getTop() + obj.getHeight() / 2 - 15;
}
if (pos > obj.bottomLimit)
pos = obj.bottomLimit;
if (pos < obj.topLimit)
pos = obj.topLimit;
interval = obj.top - pos;
obj.top = obj.top - interval / 5;
obj.style.top = obj.top + "px";
}, 30)
}
function ScrollTop(){
self.window.scroll(0,0);
}
3.퀵메뉴
원본
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀵메뉴</title>
<script type="text/javascript" src="js/scroll.js"></script>
<style type="text/css">
body,div,h1,p,ul,li{margin: 0;padding: 0;}
ul{list-style: none;}
img{border: none;}
body{text-align: center;font-size: 12px;line-height: 1.2em;font-family: Dotum,"돋움",sans-serif;}
#wrap{position:relative;width:800px;margin: 0 auto;text-align: left;}
#header{border: 1px solid blue;background: skyblue;}
#container{border: 1px solid red;background: pink;height:2000px;}
#footer{border: 1px solid green;background: #0f0;}
.quick{position:absolute;left:810px;top:250px;background: url(images/quick_bg.jpg) no-repeat 0 0;width:66px;height:154px;
padding-top: 30px;text-align: center;}
.quick li{background: url(images/bar.jpg) no-repeat 50% 0;padding:10px 0;}
.quick li.first{background: none;}
.quick li img{margin:0 auto;display:block;}
.quick li a{text-decoration: none;color: #666; font-size: 11px;}
.quick li a:hover{text-decoration: none;color: green;font-weight: bold;}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>header</h1></div>
<div id="container"><p>container</p></div>
<div id="footer"><p>footer</p></div>
<div id="quick" class="quick">
<ul>
<li class="first"><a href="#"><img src="images/q_icon.jpg" alt="quick 응모신청">응모신청</a></li>
<li><a href="#">모집요강</a></li>
<li><a href="#">출품규정</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
initMoving(document.getElementById("quick"), 250, 66, 250);
</script>
<!-- initMoving(target, position, topLimit, btmLimit)
target:document.getElementById("지정영역ID") Id d 소문자 주의
position:영역의 위치(top)
toplimit:백그라운드 width
btmlimit:최하단 내려가는 영역 포지션값 제외 -->
</body>
</html>
결과물
