묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
엔지오식 메뉴 만들기에서.. 레이어 상대위치 지정
2003.04.13 16:15
http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&keyword=엔지오&select_arrange=headnum&desc=asc&no=203http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&keyword=상대위치&select_arrange=headnum&desc=asc&no=76엔지오같은 메뉴.. 저 위에 커뮤니티 웹스터디 ............. 있는거 있잖아요..
그걸 가운데 정렬해서 서브레이어가 해상도에 따라 다른위치에 나오지 않게 할려구 그러는데요...
우선 엔지오같은 메뉴 만들기 에센님 강좌 보구 이렇게 만들었구요..
( 링크2 )
------------------------------- 자바스크립트부분 ------------------------------
<script>
function showSubMenu(obj) {
switch(obj) {
// 메뉴수에 맞추어 case 를 추가해 주시면 됩니다.
// pWidth 라는 것은 가상적으로 붙여준 이름으로
// 오른쪽 스크롤바에서 부터 서브레이어의 왼쪽 부분 까지의 길이기를 가리킵니다.
case 'SubMenu1' : pWidth = 550; break;
case 'SubMenu2' : pWidth = 465; break;
case 'SubMenu3' : pWidth = 378; break;
}
xPos = document.body.clientWidth - pWidth; // xPos 에 대한 값을 지정하는 부분입니다.
document.all[obj].style.posLeft = parseInt(xPos);// 여기서 posLeft 를 posRight 로 잡아주시면 다시 왼쪽 정렬이 됩니다.
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
image1on = new Image;
image1on.src = "./images/m_story_a.jpg";
image1off = new Image;
image1off.src = "./images/m_story.jpg";
image2on = new Image;
image2on.src = "image/top_btn_2_on.gif";
image2off = new Image;
image2off.src = "image/top_btn_2.gif";
image3on = new Image;
image3on.src = "image/top_btn_3_on.gif";
image3off = new Image;
image3off.src = "image/top_btn_3.gif";
image4on = new Image;
image4on.src = "image/top_btn_4_on.gif";
image4off = new Image;
image4off.src = "image/top_btn_4.gif";
image5on = new Image;
image5on.src = "image/top_btn_5_on.gif";
image5off = new Image;
image5off.src = "image/top_btn_5.gif";
image6on = new Image;
image6on.src = "image/top_btn_6_on.gif";
image6off = new Image;
image6off.src = "image/top_btn_6.gif";
function img_on(imgName) {
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
function img_off(imgName) {
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
</script>
----------------------------------------------------------------------
------------------------- 서브레이어출력부분 -----------------------------
<div id=SubMenu1 style="z-index:6; position:absolute; left:12px; top:115px; width:120; visibility: hidden" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" > 서브 메뉴 1 내용 </div>
.
.
.
------------------------------------------------------------------------
------------------------- 바디 메뉴출력부분 ------------------------------
<a href="링크1" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" onfocus=blur()><img src=메뉴1이미지 border=0 width=90 height=59 name="image1"></a>
---------------------------------------------------------------------------
에센님 강좌 보구 이렇게 했는데요..
여기서.. 레이어 출력을 가운데로 하고 싶어서..
(* Legend님 강좌내용*) 이걸 보구 할려구 그러거든요..
http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&keyword=상대위치&select_arrange=headnum&desc=asc&no=76
-------스타일시트---------
<style>
#Layer
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
---------------------------
-------서브레이어출력부분-------
<div id=Layer pos=60>
메뉴1
</div>
.
..
.
.
-------------------------
이렇게 하라구 강좌에 있었는데요..
이 두개를 어떻게 끼워맞춰야 하나요......ㅡㅡ
그냥 쓰니까.. 오류나구..
서브레이어출력부분이.. 겹치는부분이 있잖아요..
가운데서부터 위치 지정하는거 어떻게 해야하는지..ㅠ_ㅜ
알려주세요~~~
그걸 가운데 정렬해서 서브레이어가 해상도에 따라 다른위치에 나오지 않게 할려구 그러는데요...
우선 엔지오같은 메뉴 만들기 에센님 강좌 보구 이렇게 만들었구요..
( 링크2 )
------------------------------- 자바스크립트부분 ------------------------------
<script>
function showSubMenu(obj) {
switch(obj) {
// 메뉴수에 맞추어 case 를 추가해 주시면 됩니다.
// pWidth 라는 것은 가상적으로 붙여준 이름으로
// 오른쪽 스크롤바에서 부터 서브레이어의 왼쪽 부분 까지의 길이기를 가리킵니다.
case 'SubMenu1' : pWidth = 550; break;
case 'SubMenu2' : pWidth = 465; break;
case 'SubMenu3' : pWidth = 378; break;
}
xPos = document.body.clientWidth - pWidth; // xPos 에 대한 값을 지정하는 부분입니다.
document.all[obj].style.posLeft = parseInt(xPos);// 여기서 posLeft 를 posRight 로 잡아주시면 다시 왼쪽 정렬이 됩니다.
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
image1on = new Image;
image1on.src = "./images/m_story_a.jpg";
image1off = new Image;
image1off.src = "./images/m_story.jpg";
image2on = new Image;
image2on.src = "image/top_btn_2_on.gif";
image2off = new Image;
image2off.src = "image/top_btn_2.gif";
image3on = new Image;
image3on.src = "image/top_btn_3_on.gif";
image3off = new Image;
image3off.src = "image/top_btn_3.gif";
image4on = new Image;
image4on.src = "image/top_btn_4_on.gif";
image4off = new Image;
image4off.src = "image/top_btn_4.gif";
image5on = new Image;
image5on.src = "image/top_btn_5_on.gif";
image5off = new Image;
image5off.src = "image/top_btn_5.gif";
image6on = new Image;
image6on.src = "image/top_btn_6_on.gif";
image6off = new Image;
image6off.src = "image/top_btn_6.gif";
function img_on(imgName) {
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
function img_off(imgName) {
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
</script>
----------------------------------------------------------------------
------------------------- 서브레이어출력부분 -----------------------------
<div id=SubMenu1 style="z-index:6; position:absolute; left:12px; top:115px; width:120; visibility: hidden" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" > 서브 메뉴 1 내용 </div>
.
.
.
------------------------------------------------------------------------
------------------------- 바디 메뉴출력부분 ------------------------------
<a href="링크1" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" onfocus=blur()><img src=메뉴1이미지 border=0 width=90 height=59 name="image1"></a>
---------------------------------------------------------------------------
에센님 강좌 보구 이렇게 했는데요..
여기서.. 레이어 출력을 가운데로 하고 싶어서..
(* Legend님 강좌내용*) 이걸 보구 할려구 그러거든요..
http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&keyword=상대위치&select_arrange=headnum&desc=asc&no=76
-------스타일시트---------
<style>
#Layer
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
---------------------------
-------서브레이어출력부분-------
<div id=Layer pos=60>
메뉴1
</div>
.
..
.
.
-------------------------
이렇게 하라구 강좌에 있었는데요..
이 두개를 어떻게 끼워맞춰야 하나요......ㅡㅡ
그냥 쓰니까.. 오류나구..
서브레이어출력부분이.. 겹치는부분이 있잖아요..
가운데서부터 위치 지정하는거 어떻게 해야하는지..ㅠ_ㅜ
알려주세요~~~
#Submenu1{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
이걸 헤드안에 스타일로 넣어주시고요.
<div id=SubMenu1 pos=60 style="top:115px; width:120; visibility: hidden" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" > 서브 메뉴 1 내용 </div>
이렇게 하시면 될지도.. 어쩌면 히든부분과 스타일충돌을 일으킬지도 모르겠지만 일단 이렇게 한번 고쳐보세요. pos 부분은 숫자 고쳐주시는거 아시죠^^