메인네비게이션 클릭시 서브네비게이션 위치가 제각각입니다.
본문
소스를 받아서 페이지 제작을 하고 있는데 너무 어렵네용.ㅡㅜ
팁얻어갈려고 합니다.!
1.1차메뉴(#menu li )를 클릭했을때 2차매뉴(#menu li ul)가 나오는데 메인네비에 어느버튼을 누르던 그 위치를 고정하고 싶습니다.
문제의 화면인데요.
옆에 메인네비게이션을 클릭하면 서브네비게이션들의 위치가 제각각입니다.
메인네비게이션어느걸 눌러도 1번째그림위치에 서브네비게이션들이 포지션 되었음 합니다.
2.아무것도 클릭안하고 있는때는 기본적으로 메인네비게이션1번째가 화면에 비춰지고 있는 상태로 두고 싶을땐 어떻게 하나용?
코딩-----------------------------------------------------------------------------------------
<style>
#menu {display:inline-block;width:219px;/* 메뉴의 너비 */}
#menu li {display:inline-block;width:219px;/* 1차메뉴 개수에 따라 %조절 */height:73px;/* 1차 메뉴바 높이 */float:left;}
#menu li ul {display:none;width:700px;/* 2차메뉴의 위치 - 1차메뉴 맨위에서 부터의 거리 */
background:red;postion:fixed; top:10px;left:10px;
}
#menu li ul li {display:inline-block;width:215px;height:212px;/* 2차메뉴의 높이 */padding:0;text-align:center;
padding-left:20px;float:left;
}
#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}
#menu .submenu5 {margin-left:-100px}
#menu .submenu6 {margin-left:-100px}
#menu .submenu7 {margin-left:-100px}
------------------------------------------- */
#menu .submenu1,#menu .submenu2,#menu .submenu3,#menu .submenu4,#menu .submenu5,#menu .submenu6,#menu .submenu7 {
margin-left:250px;
}
#top {padding-bottom:40px;}
</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="top">
<p><img src="/SkinImg/case_img/top_img.jpg" alt="상단이미지"></p>
</div>
<div id="menu">
<ul>
<li onmouseover="javascript:menu_view(1);">
<a href="#"><img src="/SkinImg/case_img/mainnav_01.gif" alt="점보롤화장지"></a>
<ul id="submenu1" class="submenu1" onmouseover="javascript:menu_view(1);" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_01_01.gif" alt="윈도즈점보롤화장지전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_01_02.gif" alt="인사이드점보롤화장지전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_01_03.gif" alt="인사이드점보롤화장지트윈전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(2);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_02.gif" alt="2번메뉴"></a>
<ul id="submenu2" class="submenu2" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_02_01.gif" alt="벌크팩트윈화장지"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_02_02.gif" alt="벌크팩싱글화장지"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(3);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_03.gif" alt="3번메뉴"></a>
<ul id="submenu3" class="submenu3" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_03_01.gif" alt="윈도즈핸드타올전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_03_02.gif" alt="윈도즈핸드타올(소형)전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_03_03.gif" alt="핸드타올수거전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(4);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_04.gif" alt="4번메뉴"></a>
<ul id="submenu4" class="submenu4" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_04_01.gif" alt="윈도즈써니패치롤핸드타올전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_04_02.gif" alt="윈도즈롤핸드타올레버컷팅전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_04_03.gif" alt="윈도즈슬림롤핸드타올수거전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(5);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_05.gif" alt="5번메뉴"></a>
<ul id="submenu5" class="submenu5" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_05_01.gif" alt="가즈맨변기세정제전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_05_02.gif" alt="윈도즈좌변기커버전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(6);" >
<a href="#"><img src="/SkinImg/case_img/mainnav_06.gif" alt="6번메뉴"></a>
<ul id="submenu6" class="submenu6" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_01.gif" alt="윈도즈물비누500ml전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_02.gif" alt="킴케어럭셔리홈솝전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_03.gif" alt="킴케어스프레이폼솝전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_06_04.gif" alt="윈도즈물비누800ml전용용기"></a></li>
</ul>
</li>
<li onmouseover="javascript:menu_view(7);">
<a href="#"><img src="/SkinImg/case_img/mainnav_07.gif" alt="7번메뉴"></a>
<ul id="submenu7" class="submenu7" >
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_07_01.gif" alt="윈도즈와치맨방향제전용용기"></a></li>
<li class="submenu"><a href="#"><img src="/SkinImg/case_img/subnav_07_02.gif" alt="킴케어셀방향제전용용기"></a></li>
</ul>
</li>
</ul>
</div>
---------------------------------------------------------------------------------------------------
답변 2
처음 로딩시 1번 보이게 하기
window.onload = function()
{
menu_view(1);
}
를 </script> 위에 넣어보아용~
서브메뉴고정시키는건
#menu .submenu1,#menu .submenu2,#menu .submenu3,#menu .submenu4,#menu .submenu5,#menu .submenu6,#menu .submenu7 {
margin-left:250px;
position:absolute;
top:200px;
}
스타일에 포지션하고 탑 설정해보아용~
