오

홈페이지제작 서브메뉴 질문좀드려요..

· 2013-04-26 (금) 16:44:50 · 1943 · 3
홈페이지 서브메뉴를 만들고자 합니다.

제가만들고싶은 메뉴는 그누보드 홈페이지처럼 마우스 오버시

아래로 슬라이드되는 서브메뉴입니다.

정확한 명칭을몰라서 아무리검색해도 제작방법을 찾기 힘드네요..

비헤이비어와 DIV AP로 만드는것인가요?아니면 플래쉬?

아래는 그누보드홈피와 비슷한 참고메뉴인데요 이 홈페이지 downloads 메뉴가 슬라이드되네요.
http://mygony.com/

어떻게 하면 흉내좀 낼수있을까요

알고계시는분께선 참고할 링크나 자세한 설명좀 부탁드립니다..


|

댓글 3개

2013-04-29 (월) 22:22:54
헛 감사합니다. 뭔가 힌트를 주신듯한데 제가 초보라서 쉿!하고 일단 찾아보고 공부해보겠습니다.
소스 보기하면 다 나오는데요 ;;
[code]
<!doctype html>
<html lang="ko">
<head>
<title>그누메뉴</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://sir.co.kr/css/default.css?v=130429&vv=1.1">
<script src="http://sir.co.kr/js/jquery-1.8.3.min.js"></script>
</head>
<body >
<header>
<nav id='gnb'>
<ul id="gnb_ul">
<li id='gnb_was' class="gnb_1depth">
<a href='../main/g4s/' ><span></span>대메뉴</a>
<ul class="gnb_sub_ul">
<li class="gnb_2depth"><a href="#">소메뉴1-1</a></li>
</ul>
</li>
<li id='gnb_gnuboard' class="gnb_1depth">
<a href='#' >대메뉴2</a>
<ul class="gnb_sub_ul">
<li class="gnb_2depth"><a href="#">소메뉴2-1</a></li>
</ul>
</li>

</nav>
<script>
$(function(){
var hide_menu = false;
var mouse_event = false;
var oldX = oldY = 0;

$(document).mousemove(function(e) {
if(oldX == 0) {
oldX = e.pageX;
oldY = e.pageY;
}

if(oldX != e.pageX || oldY != e.pageY) {
mouse_event = true;
}
});

// 주메뉴
var $gnb = $(".gnb_1depth > a");
$gnb.mouseover(function() {
if(mouse_event) {
$(".gnb_1depth").removeClass("gnb_1depth_over gnb_1depth_over2 gnb_1depth_on");
$(this).parent().addClass("gnb_1depth_over gnb_1depth_on");
menu_rearrange($(this).parent());
hide_menu = false;
}
});

$gnb.mouseout(function() {
hide_menu = true;
});

$(".gnb_1depth li").mouseover(function() {
hide_menu = false;
});

$(".gnb_1depth li").mouseout(function() {
hide_menu = true;
});

$gnb.focusin(function() {
$(".gnb_1depth").removeClass("gnb_1depth_over gnb_1depth_over2 gnb_1depth_on");
$(this).parent().addClass("gnb_1depth_over gnb_1depth_on");
menu_rearrange($(this).parent());
hide_menu = false;
});

$gnb.focusout(function() {
hide_menu = true;
});

$(".gnb_1depth ul a").focusin(function() {
$(".gnb_1depth").removeClass("gnb_1depth_over gnb_1depth_over2 gnb_1depth_on");
var $gnb_li = $(this).closest(".gnb_1depth").addClass("gnb_1depth_over gnb_1depth_on");
menu_rearrange($(this).closest(".gnb_1depth"));
hide_menu = false;
});

$(".gnb_1depth ul a").focusout(function() {
hide_menu = true;
});

$('#gnb_ul>li').bind('mouseleave',function(){
submenu_hide();
});

$(document).bind('click focusin',function(){
if(hide_menu) {
submenu_hide();
}
});

function submenu_hide() {
$(".gnb_1depth").removeClass("gnb_1depth_over gnb_1depth_over2 gnb_1depth_on");
}
});

</script>

</body>
</html>

[/code]
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

203,059건
+
제목 글쓴이 날짜 조회
13-05-02 조회 2,522
13-05-02 조회 1,209
13-05-02 조회 1,791
13-05-02 조회 1,328
13-04-30 조회 1,185
13-04-30 조회 2,452
13-04-30 조회 1,220
13-04-29 조회 1,232
13-04-29 조회 1,199
13-04-29 조회 1,317
13-04-29 조회 1,234
13-04-26 조회 1,944
13-04-26 조회 1,473
13-04-25 조회 1,357
13-04-24 조회 1,226
13-04-23 조회 1,257
13-04-23 조회 1,307
13-04-23 조회 1,242
13-04-22 조회 1,207
13-04-22 조회 1,029