홈페이지제작 서브메뉴 질문좀드려요..
홈페이지 서브메뉴를 만들고자 합니다.
제가만들고싶은 메뉴는 그누보드 홈페이지처럼 마우스 오버시
아래로 슬라이드되는 서브메뉴입니다.
정확한 명칭을몰라서 아무리검색해도 제작방법을 찾기 힘드네요..
비헤이비어와 DIV AP로 만드는것인가요?아니면 플래쉬?
아래는 그누보드홈피와 비슷한 참고메뉴인데요 이 홈페이지 downloads 메뉴가 슬라이드되네요.
http://mygony.com/
어떻게 하면 흉내좀 낼수있을까요
알고계시는분께선 참고할 링크나 자세한 설명좀 부탁드립니다..
제가만들고싶은 메뉴는 그누보드 홈페이지처럼 마우스 오버시
아래로 슬라이드되는 서브메뉴입니다.
정확한 명칭을몰라서 아무리검색해도 제작방법을 찾기 힘드네요..
비헤이비어와 DIV AP로 만드는것인가요?아니면 플래쉬?
아래는 그누보드홈피와 비슷한 참고메뉴인데요 이 홈페이지 downloads 메뉴가 슬라이드되네요.
http://mygony.com/
어떻게 하면 흉내좀 낼수있을까요
알고계시는분께선 참고할 링크나 자세한 설명좀 부탁드립니다..
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 3개
[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]