묻고답하기
온마우스시 원하는 레이어 나타내게 하기
2007.01.31 02:14
고수님들 안녕하세요?
야후 메인페이지에 나오는 [뉴스|스포츠|연애|알짜재테크] 처럼
각 메뉴에 마우스온을 했을때 해당 정보 테이블(레이어)이 나오는 것과 같은 기능을
제 홈피에 구현하고 싶습니다.
정확히 말씀드린다면 제로보드로 여러가지 게시판을 만들고
게시판 이름위에 마우스를 갖다대면 해당 게시판이 뜰 스 있도록 구현하고 싶습니다.
야후 메인페이지의 소스를 뜯어보려 했지만 잘 안되는군요.
네이버지식에도 질문을 올렸지만 레이어메뉴(단순링크)를 구현하는 답만 받았습니다.
제 생각으로는 레이어에 구현하고 싶은 페이지를 넣고 자바스크립트로 제어하는것 같은데....
고수님들 한 수 갈켜 주세요.
간단히 예를 든다면 [공지사항|방명록|자유게시판] 이라는 메뉴 각각 위에 커서를 갖다대면
공지사항이 나오고 방명록이 나오고 게시판이 나오게 하고 싶습니다.
야후 메인페이지에 나오는 [뉴스|스포츠|연애|알짜재테크] 처럼
각 메뉴에 마우스온을 했을때 해당 정보 테이블(레이어)이 나오는 것과 같은 기능을
제 홈피에 구현하고 싶습니다.
정확히 말씀드린다면 제로보드로 여러가지 게시판을 만들고
게시판 이름위에 마우스를 갖다대면 해당 게시판이 뜰 스 있도록 구현하고 싶습니다.
야후 메인페이지의 소스를 뜯어보려 했지만 잘 안되는군요.
네이버지식에도 질문을 올렸지만 레이어메뉴(단순링크)를 구현하는 답만 받았습니다.
제 생각으로는 레이어에 구현하고 싶은 페이지를 넣고 자바스크립트로 제어하는것 같은데....
고수님들 한 수 갈켜 주세요.
간단히 예를 든다면 [공지사항|방명록|자유게시판] 이라는 메뉴 각각 위에 커서를 갖다대면
공지사항이 나오고 방명록이 나오고 게시판이 나오게 하고 싶습니다.
<head>
<script>
function menu1() {
if(document.getElementById('menu1').style.display != 'block') {
document.getElementById('menu1').style.display = 'block';
}
menuout(1);
}
function menu2() {
if(document.getElementById('menu2').style.display != 'block') {
document.getElementById('menu2').style.display = 'block';
}
menuout(2);
}
function menuout(num) {
var Num = num;
var menu_name;
for(i=1;i<=2;i++) { // 2는 menu1 menu2 처럼 레이어가 2개라서..갯수만큼
if(Num != i) {
menu_name = "menu" + i;
if(document.getElementById(menu_name).style.display == 'block') {
document.getElementById(menu_name).style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<A href='#none' onmouseover="menu1()">[메뉴1]</a> <a href='#none' onmouseover="menu2()">[메뉴2]</a><br>
<div id=menu1 style='position:absolute;left:20px;top:100px;display:none;z-index:2'>메뉴1내용</div>
<div id=menu2 style='position:absolute;left:20px;top:100px;display:none;z-index:2'>메뉴2내용</div>
</body>
</html>
가장 기본적인 것을 알아보기 쉬운형태로 적었습니다.
좀더 응용하셔서 세밀하게 적용하실 수 있을 겁니다.
각각의 레이어에는 원하는 내용을 넣으시면 됩니다.