DIV로 메뉴만들때 공백 없애는 방법과 내용 링크시키는 방법

본문 바로가기

DIV로 메뉴만들때 공백 없애는 방법과 내용 링크시키는 방법

작성일 2009.07.22댓글 2건
    게시물 수정 , 삭제는 로그인 필요

DIV로 홈페이지를 만들고 있는데요
지식인에서 테이블로 만들어진 디비전으로 고쳐서 메뉴부분을 만들긴했는데

본문(div id ="cont")과 메뉴사이에 공간이 생깁니다.

 

원하는 팁

1. div공백을 없애주세요. 디스플레이 외에 여러가지 시도해봤는데 다 안먹히네요ㅠㅠ

2. 테이블형식을 디비전으로 바꾸기만 한거라

function들은 대강 이해하는데 변수고치는데 어려움이 있네요.....굳이  childMenu를 써야되나 싶기도하구,,,,
원하는건 div id="childMenu"가 없어지고, 서브메뉴만 떴으면 좋겠는데(본문위에 뜨게,z-index를 사용하려나? )
자바스크립트에서 childMenu를 불러오게 되어있어서 수정을 못하겠어요. 

주석이나 간결하게 수정 부탁드려요.

3. 마지막으로 메뉴를 클릭하면 #cont라는 본문DIV에 링크시키고 싶어요.
현재는 아이프레임으로 불러오고있답니다. div이나 테이블로 할 수 있는 방법 알려주세요.

 

<html>
<head>

<script type="text/javascript">

<!--
function show_menu(menu_no){if(document.getElementById("childMenu"+menu_no))var src=document.getElementById("childMenu"+menu_no);else{alert("해당 메뉴를 만들어 주세요.\nmenu : childMenu"+menu_no);return;}if(dest.childNodes.length>0)temp.appendChild(dest.childNodes[0]);dest.filters.blendTrans.apply();dest.appendChild(src);dest.style.visibility="visible";dest.filters.blendTrans.play();}
function hide_menu(){if(dest.childNodes.length>0)temp.appendChild(dest.childNodes[0]);}
function Init(){dest = document.getElementById("childMenu");temp = document.getElementById("hiddenMenu");}

 

function reSize() {
        try{
        var objBody = ifrm.document.body;
        var objFrame = document.all["ifrm"];
        ifrmHeight = objBody.scrollHeight + (objBody.offsetHeight - objBody.clientHeight);
       
        if (ifrmHeight > 300) {
                objFrame.style.height = ifrmHeight
        }else{
                objFrame.style.height = 300;
        }
        objFrame.style.width = '100%'
        }catch(e){}
}
function init_iframe() {
        reSize();
        setTimeout('init_iframe()',200)
}
init_iframe();


// -->
</script>

</head>


<body onLoad="Init();">

<!--#메뉴시작-->
<DIV style="border- width:900;" onMouseleave="hide_menu()">
<div id="menu">
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu(1)">COMPANY</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu(2)">BUSINESS</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu(3)">PRODUCTS</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu(4)">LOHACLE</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu(5)">BOARD</span>

<div id="childMenu" style="width:900; height:24; background- filter:blendTrans(duration=0.5);"></div>
</div>

<div id="hiddenMenu" style="visibility:hidden;">
<div id="childMenu1" style="margin-left:3px;">
<a href="태그인넷메뉴1http://tagin.net">CEO인사말</a>
<a href="태그인넷메뉴2http://tagin.net">회사개요</a>
<a href="태그인넷메뉴3http://tagin.net">회사연혁</a>
<a href="태그인넷메뉴4http://tagin.net">조직구성</a>
<a href="태그인넷메뉴4http://tagin.net">오시는 길</a>
</div>

<div id="childMenu2" style="margin-left:110px;">
<a href="그인넷메뉴1http://tagin.net">xx부</a>
<a href="그인넷메뉴2http://tagin.net">xx부</a>
<a href="그인넷메뉴3http://tagin.net">xx부</a>
</div>

<div id="childMenu3" style="margin-left:230px;">
<a href="인넷메뉴1http://tagin.net">1</a>
<a href="인넷메뉴2http://tagin.net">2</a>
<a href="인넷메뉴3http://tagin.net">3</a>
<a href="인넷메뉴4http://tagin.net">개발</a>
</div>
<div id="childMenu4" style="margin-left:350px;">
<a href="넷메뉴1http://tagin.net">소개</a>
<a href="넷메뉴2http://tagin.net">현황</a>
<a href="넷메뉴3http://tagin.net">사진</a>
<a href="넷메뉴4http://tagin.net">FAQ</a>
</div>
<div id="childMenu5" style="margin-left:470px;">
<a href="넷메뉴1http://tagin.net">공지사항</a>
<a href="넷메뉴2http://tagin.net">견적</a>
<a href="넷메뉴3http://tagin.net">채용정보</a>
<a href="넷메뉴4http://tagin.net">자주하는 질문</a>
<a href="넷메뉴4http://tagin.net">게시판</a>
</div>
</div>
</div>

 

<!--#본문컨텐츠 시작-->

<DIV id="cont" style="width:900px;"><iframe id="ifrm" width="900" src="company/year.html" onload="reSize()" marginheight=0 marginwidth=0 frameborder="0" align="left" scrolling="no"></iframe></DIV>
<DIV  id="footer" style="width:900px;height:45;"> 풋터</DIV>
</body>
</html>



profile_image 익명 작성일 -

공백은 그곳에 서브 메뉴들이 실제로 존재하나 보이지 않게 해서 그렇습니다.

 

visibility 를 쓰나 display 를 쓰나 서브 메뉴들이 레이어가 아닌 이상 공백은 존재 합니다.

 

이럴때는 position을 사용하셔야 합니다.

 

쉽게 하기 위해서 서브 메뉴 나오는 곳의(푸루 딩딩 한곳^^)높이가 24픽셀이니깐 그다음에

 

서브 메뉴 태그들이 나오니깐 서브메뉴 태그 전체를 하나의 메뉴 컨테이너로 하여 <div id="cMcontainer">

 

이걸로 묶어 줍니다. 그리고 이 디비전 태그를 상위개체인 서브메뉴 나오는곳으로 부터 포지션을

 

상대적인 relative를 사용하시고 <div id="cMcontainer"> 이안에 나오는 서브메뉴들을 포지션을 이용해서

 

상대적인 곳에서 다시 절대 적인 absolute를 사용하시면 됩니다. 이렇게 하시면 일단 공백은 없어집니다.

 

그리고 이제는 메뉴를 간단히 수정하게 하고 싶다고 하셨는데

 

그렇다면 처음에는 서브메뉴가 보이지 육?visibility의 값을 hidden으로 합니다.

 

그리고 메인메뉴에 마우스를올릴때 보이게 하기 위해 값을 visible을 사용하면 됩니다.

 

이때 각 메인에 맞는 메뉴가 나오게 하려면 제어문을 사용해서 매개 변수로 넘겨받은 오브젝트의 아이디가

 

아닌 것을 가려내어 해당 메뉴만 보이게 하면 됩니다.

 

그렇다면 질문하신 1,2번 문제가해결 됩니다.

 

마지막 질문은 iframe을 사용하지 않될것 같습니다. 서버 스크립트를 사용하더라도 새로운 웹문서를

 

현재 페이지로 불러 오기 위해서는 인쿠르드를 사용해야 하는데 그렇다면 메뉴를 클릭할때 마다 이벤트를

 

일으켜서 사용해야 하는데 서버 스크립트는 브라우저가 아닌 서버에서 해석되어 결과를 만들어 내기때문에

 

이벤트를 할때 마다 새로운 서버페이지에 어떠한 액션을 취해야 하므로 복잡할수 있고 이렇게 사용하는곳도

 

아마 없을 것입니다. 그냥 아이프레임을 사용하는게 가장 현명 할거라 판단 됩니다.

 

그리고 스크립트 부분에서 필터 부분은 주석 처리 해두었습니다.

 

제컴에 필터 클래스 부분을 모두 삭제하여 현재 필터가 적용되지 않아서요^^

 

그럼 정리하여 아래와 같이 할수 있습니다.

 

<html>
<head>

<script type="text/javascript">
<!--
var mno = 5; //전체 서브 메뉴 개수

function show_menu(menu) {
var obj = document.getElementById(menu); //메인 메뉴에 마우스 오버시 각 id를 매개로 객체를 생성 합니다.
  
  for(var i = 1; i <= mno; i++) { //제어문을 통해 전체 메뉴를 대조 합니다.
  var obj_x = document.getElementById('childMenu' + i); //매개로 가저온 id와 다른 id를 구분하는 객체
  
    if(obj == obj_x)
    obj.style.visibility = 'visible'; //해당 서브메뉴이면 보이게
    else
    obj_x.style.visibility = 'hidden'; //해당 서브메뉴가 아니면 안보이게 합니다.
  }

//아래는 필터 부분입니다. 제가 필터가 안되서 우선 주석 처리 했습니다.

//var objft = document.getElementById("childMenu");
//    objft.filters.blendTrans.apply();
//    objft.appendChild(src);
//    objft.style.visibility="visible";
//    objft.filters.blendTrans.play();
}

function reSize() {
        try{
        var objBody = ifrm.document.body;
        var objFrame = document.all["ifrm"];
        ifrmHeight = objBody.scrollHeight + (objBody.offsetHeight - objBody.clientHeight);
      
        if (ifrmHeight > 300) {
                objFrame.style.height = ifrmHeight
        }else{
                objFrame.style.height = 300;
        }
        objFrame.style.width = '100%'
        }catch(e){}
}
function init_iframe() {
        reSize();
        setTimeout('init_iframe()',200)
}
init_iframe();

// -->
</script>
<style type="text/css">
<!--
#cMcontainer {/*서브 메뉴를 감싸는 블럭 컨테이너 입니다.*/

/*서브 메뉴가 나와야 하는 위치를 상대적으로 하여 그만큼 바닥에서 위로 24픽셀 올려 줍니다.*/
  position: relative;
  bottom: 24px;
}
#childMenu1, #childMenu2, #childMenu3, #childMenu4, #childMenu5 {

/*각 서브 메뉴들을 올려진 24 픽셀 위에서 절대적인 위치를 갖게하며 최초에 보이지 않게 합니다.*/
  position: absolute;
  visibility: hidden;
}
-->
</style>
</head>


<body>

<!--#메뉴시작-->
<DIV style="border- width:900;">
<div id="menu">
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu('childMenu1')">COMPANY</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu('childMenu2')">BUSINESS</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu('childMenu3')">PRODUCTS</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu('childMenu4')">LOHACLE</span>
 <span id="class" style="width:113; height:34;" onMouseOver="show_menu('childMenu5')">BOARD</span>
<div id="childMenu" style="width:900; height:24; background- filter:blendTrans(duration=0.5);"></div>
</div>
<div id="cMcontainer">
<div id="childMenu1" style="margin-left: 3px;">
<a href="태그인넷메뉴1http://tagin.net">CEO인사말</a>
<a href="태그인넷메뉴2http://tagin.net">회사개요</a>
<a href="태그인넷메뉴3http://tagin.net">회사연혁</a>
<a href="태그인넷메뉴4http://tagin.net">조직구성</a>
<a href="태그인넷메뉴4http://tagin.net">오시는 길</a>
</div>
<div id="childMenu2" style="margin-left: 110px;">
<a href="그인넷메뉴1http://tagin.net">xx부</a>
<a href="그인넷메뉴2http://tagin.net">xx부</a>
<a href="그인넷메뉴3http://tagin.net">xx부</a>
</div>
<div id="childMenu3" style="margin-left: 230px;">
<a href="인넷메뉴1http://tagin.net">1</a>
<a href="인넷메뉴2http://tagin.net">2</a>
<a href="인넷메뉴3http://tagin.net">3</a>
<a href="인넷메뉴4http://tagin.net">개발</a>
</div>
<div id="childMenu4" style="margin-left: 350px;">
<a href="넷메뉴1http://tagin.net">소개</a>
<a href="넷메뉴2http://tagin.net">현황</a>
<a href="넷메뉴3http://tagin.net">사진</a>
<a href="넷메뉴4http://tagin.net">FAQ</a>
</div>
<div id="childMenu5" style="margin-left: 470px;">
<a href="넷메뉴1http://tagin.net">공지사항</a>
<a href="넷메뉴2http://tagin.net">견적</a>
<a href="넷메뉴3http://tagin.net">채용정보</a>
<a href="넷메뉴4http://tagin.net">자주하는 질문</a>
<a href="넷메뉴4http://tagin.net">게시판</a>
</div>
</div>
</div>
<!--#본문컨텐츠 시작-->
<DIV id="cont" style="width:900px;"><iframe id="ifrm" width="900" src="company/year.html" onload="reSize()" marginheight=0 marginwidth=0 frameborder="0" align="left" scrolling="no"></iframe></DIV>
<DIV  id="footer" style="width:900px;height:45;"> 풋터</DIV>
</body>
</html>

profile_image 익명 작성일 -

1. 여백
<div id="hiddenMenu" style="visibility:hidden;">
visibility는 자리를 차지합니다.
display를 쓰시면 해결이 될 듯하네요.
<div id="hiddenMenu" style="display:none;">

2. 무슨 의민지 잘 모르겠네요.

3. 지금은 iframe으로 되어 있어서 전체 페이지가 새로 고침이 일어나지 않지만 말씀하신 대로 한다면 페이지 전체가 새로 고침이 일어나고 php나 asp 같은 걸 쓰지 않는 이상 페이지를 좀 많이 만드셔야 할 듯하네요.

연관된 질문 답변 리스트

DIV로 메뉴만들때 공백 없애는 방법과...

... 고쳐서 메뉴부분을 만들긴했는데 본문(div id ="cont")과... div공백을 없애주세요. 디스플레이 외에 여러가지... 마지막으로 메뉴를 클릭하면 #cont라는 본문DIV에 링크시...

없애는방법요

아쿠아 버튼을 만들었는데요 만들때는 투명하게... 없애는 방법은 없나요?? 혹시 링크를 건게 아닌지요? 홈..... 그림 위에서 마우스 오른쪽 클릭, 메뉴에서 그림 속성 선택, 속성...

홈페이지 만들때 안깨지게 하는 방법

... 좌측은 메뉴, 가운데는 내용이 들어갈 곳, 우측은 배경... 굳이 만들지 않구요. 질문입니다. 1) 위와 같은 형식으로 프리임 안에 그림으로 설정해서 메뉴를 만드는 방법이...

엑셀 표 만들때 같은 크기로 칸을 동시에...

이런식의 표를 일일이 셀서식으로 안 만들고 한꺼번에... 방법 도구 메뉴에서 옵션을 클릭합니다. 보안 탭을... 공백을 사용할 수 없으며 밑줄로 단어를 구분할 수 있습니다....

생기는 테두리 없애는 방법^^ (내공★)

... 없애눙 방법좀 알으켜 주세요!!!!!!!!! 태그로 하는거라면 태그... 홈페이지를 만들때는 전부 이 테두리를 생략해요. 메뉴를 누르는것도 링크가 되어있는건데 메뉴마다...