롤오버시 서브메뉴가 나타나는 기본 스크립트 정보
JavaScript 롤오버시 서브메뉴가 나타나는 기본 스크립트본문
안녕하세용.~~
필요하신분이 계실지 잘 모르겠지만,
제가 일반 소규모 홈페이지를 만들때 그냥 끼워넣어서 쓰는 소스입니다.
<style>
#menu {display:inline-block;width:700px;/* 메뉴의 너비 */}
#menu li {display:inline-block;width:25%;/* 1차메뉴 개수에 따라 %조절 */height:33px;/* 1차 메뉴바 높이 */float:left;text-align:center;}
#menu li ul {display:none;position:absolute;width:400px;margin-top:26px;/* 2차메뉴의 위치 - 1차메뉴 맨위에서 부터의 거리 */}
#menu li ul li {display:inline-block;width:auto;height:28px;/* 2차메뉴의 높이 */padding:0;text-align:center;}
#menu img {border:0px none;}
#menu .side {padding:0;}
#menu .submenu {padding:5px 8px 0 8px;background:url(서브메뉴 배경) x-repeat;}
/* -------------------------------------------
각 서브메뉴의 위치
기준 : 1차 메뉴의 맨 앞에서 부터의 거리로 계산
------------------------------------------- */
#menu .submenu1 {margin-left:-100px;}
#menu .submenu2 {margin-left:-100px;}
#menu .submenu3 {margin-left:-100px;}
#menu .submenu4 {margin-left:-100px}
</style>
<script language="javascript">
/* 만약 오픈 되어 있어야 하는 서브메뉴가 있을때 사용 */
//var old_menuid = 메뉴번호;
var old_viewid = 0;
function menu_view(viewid){
if(viewid!=old_viewid){
document.getElementById("submenu"+viewid).style.display="block";
if(old_viewid!="0")document.getElementById("submenu"+old_viewid).style.display="none";
old_viewid = viewid;
}
}
function menu_hide(hideid){
document.getElementById("submenu"+hideid).style.display="none";
old_viewid = 0;
}
</script>
<div id="menu">
<ul>
<li onmouseover="javascript:menu_view(1);" onmouseout="javascript:menu_hide(1);">
<a href="#"><img src="./common/menu_01.png" alt="1번메뉴"></a>
<ul id="submenu1" class="submenu1" onmouseover="javascript:menu_view(2);" onmouseout="javascript:menu_hide(1);">
<li class="submenu"><a href="#">1-1메뉴</a></li>
<li class="submenu"><a href="#">1-2메뉴</a></li>
<li class="submenu"><a href="#">1-3메뉴</a></li>
<li class="submenu"><a href="#">1-4메뉴</a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(2);" onmouseout="javascript:menu_hide(2);">
<a href="#"><img src="./common/menu_02.png" alt="2번메뉴"></a>
<ul id="submenu2" class="submenu2" onmouseout="javascript:menu_hide(2);">
<li class="submenu"><a href="#">2-1메뉴</a></li>
<li class="submenu"><a href="#">2-2메뉴</a></li>
<li class="submenu"><a href="#">2-3메뉴</a></li>
<li class="submenu"><a href="#">2-4메뉴</a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(3);" onmouseout="javascript:menu_hide(3);">
<a href="#"><img src="./common/menu_03.png" alt="3번메뉴"></a>
<ul id="submenu3" class="submenu3" onmouseout="javascript:menu_hide(3);">
<li class="submenu"><a href="#">3-1메뉴</a></li>
<li class="submenu"><a href="#">3-2메뉴</a></li>
<li class="submenu"><a href="#">3-3메뉴</a></li>
<li class="submenu"><a href="#">3-4메뉴</a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(4);" onmouseout="javascript:menu_hide(4);">
<a href="#"><img src="./common/menu__04.png" alt="4번메뉴"></a>
<ul id="submenu4" class="submenu4" onmouseout="javascript:menu_hide(4);">
<li class="submenu"><a href="#">4-1메뉴</a></li>
<li class="submenu"><a href="#">4-2메뉴</a></li>
<li class="submenu"><a href="#">4-3메뉴</a></li>
<li class="submenu"><a href="#">4-4메뉴</a></li>
</ul>
</li>
</ul>
</div>
3
댓글 4개
감사드립니다.
이미지를 넣으면 괜찮겠지요.
#menu li {display:inline-block;width:25%;height:33px;float:left;font-size:00px;text-align:center;}
여기에 폰트사이즈 추가하시면됩니다.
이건 완전 허접한거라 다음에 다시 올려드리도록 하겠습니다. 요즘은 jquery를 보통 많이 사용합니다.