반응형

<script type="text/javascript">
var _clickedMenu=""; //클릭된 메뉴를 기억하기 위한 전역변수
function changeTextColor(clickedMenu){ //메뉴 클릭시 작동
for(i=0;i<=6;i++){
document.getElementById("m_"+i).style.color="#ffffff"; //모든 메뉴를 검정색으로 변경
}
clickedMenu.style.color="#aa5555"; //클릭한메뉴를 빨강으로 변경
_clickedMenu=clickedMenu.text; //클릭한메뉴를 전역변수에 저장
}
function setOnColor(hoveredMenu) { //메뉴에 마우스 오버시 작동
hoveredMenu.style.color="#aa5555"; //폰트색을 빨강으로 변경
}

//메뉴에 마우스 아웃시 작동
function setOutColor(outedMenu) {
//마우스 아웃한 메뉴가 클릭한 메뉴라면 함수를 바로 빠져나온다.
if(outedMenu.text==_clickedMenu) return false;
//색깔을 검정으로 변경
outedMenu.style.color="#ffffff";
}

//메뉴보이기 [저작권] 무예꼬마
function MenuView(Sub_m){
 for (i=1;i<=6;i++){
  var Onview = document.getElementById('sub_' + i);
  Onview.style.display = "none";
 }
if(Sub_m != 0){
var Onview = document.getElementById(Sub_m);
Onview.style.display = "";
}
}

</script>

<div class="menu_frame">
<div class="menu_group" style="position: absolute; left: 800px; top: 800px;">

<a href="https://art-life.tistory.com/" title="무꼬's Art Life" id="m_0" onclick="changeTextColor(this);" onmouseover="setOnColor(this);" onmouseout="setOutColor(this);">
<font size=1>무꼬's</font><br><font size=5>ArtLife</font></a>

 |<a href="http://art-life.tistory.com/category/Issue" id="m_6" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_6');" onmouseout="setOutColor(this);">
Issue</a></div>
 |<a href="http://art-life.tistory.com/category/Martial%20Art%27s" id="m_2" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_2');" onmousout="setOutColor(this);">
Martial Art's</a>
 |<a href="http://art-life.tistory.com/category/Programming" id="m_3" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_3');" onmouseout="setOutColor(this);">
Programming</a>
 |<a href="http://art-life.tistory.com/category/Game" id="m_4" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_4');" onmouseout="setOutColor(this);">
GAME</a>
 |<a href="http://art-life.tistory.com/category/Health" id="m_5" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_5');" onmouseout="setOutColor(this);">
Health</a>
|<a href="http://art-life.tistory.com/category/Daily" id="m_1" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_1');" onmouseout="setOutColor(this);">
Daily</a>
</div>
<div id="sub_1" style="display:none;">
<a href="http://art-life.tistory.com/category/Daily">Daily</a> |
<a href="http://art-life.tistory.com/category/Daily/외출">외출</a> |
<a href="http://art-life.tistory.com/category/Daily/Food">Food</a> |
<a href="http://art-life.tistory.com/category/Daily/일상">일상</a> |
</div>
<div id="sub_2" style="display:none;">
<a href="http://art-life.tistory.com/category/Martial Art's">Martial Art's</a> |
<a href="http://art-life.tistory.com/category/Martial Art's/기사">기사</a>
</div>
<div id="sub_3" style="display:none;">
<a href="http://art-life.tistory.com/category/Programming">Programming</a> |
<a href="http://art-life.tistory.com/category/Programming/PHP">PHP</a> |
<a href="http://art-life.tistory.com/category/Programming/JavaScript">JavaScript</a> |
<a href="http://art-life.tistory.com/category/Programming/기사">기사</a>
</div>
<div id="sub_4" style="display:none;">
<a href="http://art-life.tistory.com/category/GAME">GAME</a> |
<a href="http://art-life.tistory.com/category/GAME/Ragnarok">라그나로크</a> |
<a href="http://art-life.tistory.com/category/GAME/기사 & 리뷰">기사 & 리뷰</a> |
</div>
<div id="sub_5" style="display:none;">
<a href="http://art-life.tistory.com/category/Health">Health</a> |
<a href="http://art-life.tistory.com/category/Health/기사">기사</a>
</div>
<div id="sub_6" style="display:none;">
<a href="http://art-life.tistory.com/category/Issue">Issue</a>
<a href="http://art-life.tistory.com/category/Issue/유머">유머</a>
<a href="http://art-life.tistory.com/category/Issue/기사">기사[Hot issue]</a>
</div>

반응형

+ Recent posts