레이어 메뉴 어떻게 하는건가요???

keepmypace · Post by **keepmypace** » 2004 06 14 00:31 48

http://www.cross-browser.com/
여기 가면 오른쪽에 플로터가 움직이는데
맨 아래 그러니까 세번째꺼 누르면 레이어가 나오잖아요...
어떻게 하는건가요?
도무지 소스가 너무 길어서 해독이 안되네요...
몇시간동안 그거 어떻게 하는지 알아보려고 애쓰다가 ㅠㅠ 그냥 물어봅니다. ㅠㅠ;;;

kgm27 · Post by **kgm27** » 2004 06 14 07:07 34

위 페이지의 소스는 분석해보지 않았지만 제가 쓰는 간단한 방법을 알려 드리겠습니다.

스타일시트의 display 속성을 이용하는 방법입니다. display:none 이면 레이어가 화면에 나타나지 않는데 이것을 자바스크립트를 이용하여 바꿔주는 것입니다. 간단하게 작성하면 다음과 같습니다.

<script>
function show_menu() {
var obj = document.getElementById("menu");
obj.style.display = "";
}
</script>
.
.
.
<a href="#" onclick="show_menu();">메뉴</a>
<div id="menu" style="display:none">메뉴입니다</div>

메뉴를 숨길 때는 다시 display의 값을 'none'으로 바꿔주면 됩니다.

keepmypace · Post by **keepmypace** » 2004 06 14 09:33 00

^-^ 감사합니다~! document.getElementById^^

근데 레이어도 알고 싶은뎅..혹시 저 사이트처럼 모질라서도 마우스오버시에만 열리는 레이어메뉴 아시는지^^;;; 계속 잘 찾아보겠습니다...
document.getElementById이런 문자루 위치를 찾아내는건 같은데 제가 언어를 배운사람이 아니라 ㅠㅠ;;;;;

無狼 · Post by 無狼 » 2004 06 14 15:51 34

위에선 id 가 menu 인 녀석을 찾는데 onclick 이니까... 저걸 onmouseover 등으로 바꾸시면 되겠네요.

kgm27 · Post by **kgm27** » 2004 06 14 16:31 55

<html>
<head>
<script>

    function show_menu() {
        var obj = document.getElementById("menu");
        obj.style.display = "";
    }

    function hide_menu() {
        var obj = document.getElementById("menu");
        obj.style.display = "none";
    }

</script>
<style>
    #wrap {
        position: relative;
    }

    .m {
        position: relative;
        background-color:black;
        color: white;
        font-weight: bold;
    }

    #menu {
        border: 2px solid brown;
        background-color: orange;
        position: absolute;
        top: 0;
    }
</style>
</head>
<body>
<div id="wrap">
    <span class="m" onmouseover="show_menu();">m</span>
    <div id="menu" style="display:none;" onmouseout="hide_menu();">
        1. 메뉴1<br>
        2. 메뉴2<br>
        3. 메뉴3
    </div>
</div>
</body>
</html>

여기서 중요한 것은 <script> 안의 함수와 각 레이어들의 display 값입니다.

div 태그와 span 태그는 레이어를 만듭니다. 위의 소스를 보면 id가 wrap인 레이어 안에 span 태그로 만들어진 레이어와 div로 만들어진 레이어(menu)가 있습니다. 화면에는 span 레이어만 나오고 menu 레이어는 나타나지 않습니다. menu 레이어의 display가 none으로 설정되어 있기 때문입니다.

마우스가 span 레이어에 들어오면 show_menu 함수가 실행되고 show_menu 함수는 menu 레이어의 display 값을 변경하여 menu 레이어가 화면에 나타나게 합니다.

show_menu 함수는 아주 간단합니다.
var obj = document.getElementById("menu"); -> obj라는 변수가 id가 menu인 레이어를 가리키게 합니다.
obj.style.display = ""; -> menu 레이어의 display 값을 변경합니다.

마우스가 menu 레이어를 벗어나면 hide_menu 함수가 실행되어 menu 레이어의 display가 none이 됩니다. 따라서 menu 레이어가 화면에서 사라집니다.

제가 가르쳐 드릴 수 있는 것은 여기까지입니다. 더 자세한 내용은 스타일시트와 자바스크립트를 통해 직접 익히시기 바랍니다.

keepmypace · Post by **keepmypace** » 2004 06 14 17:08 25

감사합니다.^-^
근데...익스선 잘되고 모질라에선 잘 안되네요.-_-;
대체 뭔진 제가 다시 해결해보죵...

Mozilla 한국 커뮤니티

레이어 메뉴 어떻게 하는건가요???

레이어 메뉴 어떻게 하는건가요???

Re: 레이어 메뉴 어떻게 하는건가요???

Re: 레이어 메뉴 어떻게 하는건가요???

Re: 레이어 메뉴 어떻게 하는건가요???

Re: 레이어 메뉴 어떻게 하는건가요???

Re: 레이어 메뉴 어떻게 하는건가요???

Who is online