3dept의 메뉴네비게이션 이벤트 걸기
mouseenter, mouseleave
tip
li부모태그에 mouseover했다가, 자식태그로 마우스가 이동하면, mouseout으로 인식해버림.
이것을 보완할 이벤트
mouseenter
mouseleave
자식태그로 이동해도 부모태그에서 mouseout한것으로 인식안함
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideNavi</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
list-style-type:none;
}
#container{
margin:100px auto;
width:537px;
}
ul.menu li{
float:left;
width:179px;
height:48px;
background:url("images/btn.png");
position:relative;
}
* html ul.menu li{
display:inline;
zoom:1;
}
*+html ul.menu li{
display:inline;
zoom:1;
}
ul.menu li a{
display:block;
width:100%;
height:100%;
line-height:48px;
text-indent:30px;
font-weight:bold;
color:#CFDFB5;
text-decoration:none;
position:relative;
}
ul.menu li a:hover{
background:url("images/btn_over.png");
}
ul.sub{
display:none;
}
* html ul.sub{
zoom:1;
position:relative;
}
*+html ul.sub{
zoom:1;
position:relative;
}
ul.sub li{
float:none;
}
ul.sub li ul.sub{
position:absolute;
/* 두번째 서브메뉴는 부모의 위치를 기준으로 잡아야 함 */
left:179px;
top:0;
}
ul.menu{
zoom:1;
}
ul.menu:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
</style>
<script type="text/javascript">
var $mainMenu; // 메뉴네비게이션들 전부 담을 변수
$(document).ready(function(){
// 메뉴네비게이션들 전부 담을 변수
$mainMenu = $(".menu li");
// hovertl slidedown 이벤트 걸기
// tip
/*
*
* li부모태그에 mouseover했다가, 자식태그로 마우스가 이동하면, mouseout으로 인식해버림.
* 이것을 보완할 이벤트: mouseenter, mouseleave
* 자식태그로 이동해도 부모태그에서 mouseout한것으로 인식안함
*/
$mainMenu.bind("mouseenter", onOver);
$mainMenu.bind("mouseleave", onOut);
});
function onOver(){
// 추가 tip :not(:animated)는 이벤트의 중복을 막기위해서
$(this).children(".sub:not(:animated)").slideDown(300, "easeOutExpo");
}
function onOut(){
// 추가 tip :not(:animated)는 이벤트의 중복을 막기위해서
$(this).children(".sub:not(:animated)").slideUp(300, "easeOutExpo");
}
</script>
</style>
</head>
<body>
<div id="container">
<ul class="menu">
<li><a href="#">메뉴A</a>
<ul class="sub">
<li><a href="#">서브메뉴A</a></li>
<li><a href="#">서브메뉴A</a></li>
<li><a href="#">서브메뉴A</a><!--
--><ul class="sub">
<li><a href="#">서브메뉴A2</a></li>
<li><a href="#">서브메뉴A2</a></li>
<li><a href="#">서브메뉴A2</a></li>
</ul><!--
--></li>
</ul>
</li>
<li><a href="#">메뉴B</a>
<ul class="sub">
<li><a href="#">서브메뉴B</a></li>
<li><a href="#">서브메뉴B</a>
<ul class="sub">
<li><a href="#">서브메뉴B2</a></li>
<li><a href="#">서브메뉴B2</a></li>
<li><a href="#">서브메뉴B2</a>
<ul class="sub">
<li><a href="#">서브메뉴B3</a></li>
<li><a href="#">서브메뉴B3</a></li>
<li><a href="#">서브메뉴B3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">서브메뉴B</a></li>
</ul>
</li>
<li><a href="#">메뉴C</a>
<ul class="sub">
<li><a href="#">서브메뉴B</a>
<ul class="sub">
<li><a href="#">서브메뉴C2</a></li>
<li><a href="#">서브메뉴C2</a></li>
<li><a href="#">서브메뉴C2</a></li>
</ul>
</li>
<li><a href="#">서브메뉴B</a></li>
<li><a href="#">서브메뉴B</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
위의 mouseenter, mouseleave의 예제 샘플
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideNavi</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
div#main{
width: 200px;
height:200px;
background:red;
position:absolute;
left:200px;
top:200px;
}
div#sub{
width:100px;
height:100px;
margin: 50px auto;
background:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 최초 mouse가 over, out되고, 자식태그로 이동시 mouseover/mouseout은 over/out으로 보지만,
// mouseenter/mouseleave는 over/out으로 보지 않음.
$("#main").bind("mouseout", onOut);
});
function onOut(){
alert('마우스가 아웃되었습니다.');
}
</script>
</style>
</head>
<body>
<div id="main">
<div id="sub">
</div>
</div>
</body>
</html>
메뉴네비게이션 이미지 이용 애니메이션 걸기
아래의 버튼위에 마우스 올리고 내릴때마다 1장 이미지 png를
overflow:hidden
position: relative
인 상태에서
top의 위치를 바꿔서, 색상이 변화가 일어나게 해줌
tip
빠른 이벤트변화이므로, 중복을 막기위한 animation 중지는 stop을 이용
아래 png 파일들
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animationNavi</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:url(images/index_back.gif);
}
ul.menu{
background:url(images/bg.jpg) repeat-x;
width:700px;
height:50px;
position:absolute;
left:50px;
top:50px;
overflow:hidden;
padding-left:80px;
border:solid 1px #999;
border-radius:10px;
box-shadow:2px 2px 2px #333;
}
ul.menu li{
margin-top:10px;
overflow:hidden;
width:120px;
height:30px;
float:left;
cursor:pointer;
}
ul.menu li div{
position:relative;
}
</style>
<script type="text/javascript">
var $mainMenu;
$(document).ready(function(){
$mainMenu = $(".menu").children();
$mainMenu.bind("mouseenter", onOver);
$mainMenu.bind("mouseleave", onOut);
});
function onOver(){
// tip: 이런건 반응이 빠르기때문에, stop으로 이벤트 컨트롤
$(this).children().stop();
// 해당 mouseover된 li태그의 자식인 div의 위치를 바꿔주기: top
$(this).children().animate({"top":-30}, 200, "easeOutExpo");
}
function onOut(){
// tip: 이런건 반응이 빠르기때문에, stop으로 이벤트 컨트롤
$(this).children().stop();
// 해당 mouseover된 li태그의 자식인 div의 위치를 바꿔주기: top
$(this).children().animate({"top":0}, 200, "easeOutExpo");
}
</script>
</head>
<body>
<ul class="menu">
<li>
<div><img src="images/menu_1.png"></div>
</li>
<li>
<div><img src="images/menu_2.png"></div>
</li>
<li>
<div><img src="images/menu_3.png"></div>
</li>
<li>
<div><img src="images/menu_4.png"></div>
</li>
<li>
<div><img src="images/menu_5.png"></div>
</li>
</ul>
</body>
</html>
아코디언 메뉴-배열
작동원리
각메뉴에 마우스를 올리면 해당메뉴의 높이를 늘려서 안에있는 이미지를 보여주면서
그안에있는 이미지는 동시 올려주어서 타이틀을 안보이게 해준다.
해당 menu_item > menu_item_content > image 2개가 있음
over하게되면, 메뉴의 높이가 커짐
.accordion_menu .menu_item{
position:relative;
height:30px;
overflow:hidden;
cursor:pointer;
}
배열
어떤것은 서브메뉴가 많을 수도 있고, 적을 수도 있고, 없을수도 있음.
즉, 규칙, 사이즈들을 찾기 어려울때 어떻게 해야할까?
이럴때는 배열을 이용한다.
이때, 중요한 함수
index(): 순번구하는 함수
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>accordionMenu</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
body{
background:url(../images/index_back.gif);
}
.accordion_menu{
position:absolute;
left:100px;
top:50px;
width:300px;
padding:20px 0;
border-radius:10px;
box-shadow:2px 2px 2px #333;
background-color:#eeeeee;
}
.accordion_menu .menu_item{
position:relative;
height:30px;
overflow:hidden;
cursor:pointer;
}
.accordion_menu .menu_item .menu_item_content{
position:absolute;
}
.accordion_menu .menu_item .menu_item_content img{
display:block;
}
</style>
<script type="text/javascript">
/*
* 작동원리
각메뉴에 마우스를 올리면 해당메뉴의 높이를 늘려서 안에있는 이미지를 보여주면서
그안에있는 이미지는 동시 올려주어서 타이틀을 안보이게 해준다.
*/
/*
* 다행이도 레퍼런스로 준비된 menu_1_over.png ~ menu_4_over.png의 사진 높이는 모두 113px이지만,
* 만약에 이런 이미지 사이즈들이 다를 경우에는 어떻게 해야할까?
* 어떤것은 서브메뉴가 많을 수도 있고, 적을 수도 있고, 없을수도 있음.
* 즉, 규칙, 사이즈들을 찾기 어려울때 어떻게 해야할까?
* 이럴때는 배열을 이용한다.
*/
var $mainMenu;
//var openHeight = 120;
var closeHeight = 30;
var openArray=[120, 240, 30, 200, 400]; // 순서에 맞게 높이값을 넣은 배열
var overNum; // 마우스 올렸을때 해당 태그의 순번
$(document).ready(function(){
$mainMenu = $(".menu_item");
$mainMenu.bind("mouseenter", onOver);
$mainMenu.bind("mouseleave", onOut);
});
function onOver(){
overNum = $mainMenu.index($(this)); // 마우스를 올렸을때 해당 태그의 순번
//alert(overNum);
// <div class="menu_item_content">의 높이를 늘려주기
$(this).stop();
// 이미지들의 크기가 일정할 경우 하는 방법
//$(this).animate({"height": openHeight}, 300, "easeOutExpo");
// 이미지들으 크기가 다를경우 배열을 이용해서 하는 방법
$(this).animate({"height": openArray[overNum]}, 300, "easeOutExpo");
// <div class="menu_item_content"> 아래에 있는 image태그들의 top을 올려주기
$(this).children().stop();
$(this).children().animate({"top":-closeHeight},300, "easeOutExpo");
}
function onOut(){
// <div class="menu_item_content">의 높이를 줄여주기
$(this).stop();
$(this).animate({"height": 30}, 300, "easeOutExpo");
// <div class="menu_item_content"> 아래에 있는 image태그들의 top을 내려주기
$(this).children().stop();
$(this).children().animate({"top":0},300, "easeOutExpo");
}
</script>
</head>
<body>
<div class="accordion_menu">
<div class="menu_item">
<div class="menu_item_content">
<img src="images/menu_1.png">
<img src="images/menu_1_over.png" >
</div>
</div>
<div class="menu_item">
<div class="menu_item_content">
<img src="images/menu_2.png">
<img src="images/menu_2_over.png" >
</div>
</div>
<div class="menu_item">
<div class="menu_item_content">
<img src="images/menu_3.png">
<img src="images/menu_3_over.png" >
</div>
</div>
<div class="menu_item">
<div class="menu_item_content">
<img src="images/menu_4.png">
<img src="images/menu_4_over.png" >
</div>
</div>
<div class="menu_item">
<div class="menu_item_content">
<img src="images/menu_5.png">
<img src="images/menu_5_over.png" >
</div>
</div>
</div>
</body>
</html>
2depth 메뉴 네비게이션-동시에 4가지이벤트
레퍼런스 이미지 메인메뉴 파일들png
레퍼런스 이미지 서브메뉴 파일들png
핵심
-탭키로 작동이 되어야함.
-동시에 4가지 모션을 한다.
메인메뉴가 들어가고 나가고
서브메뉴가 들어가고 나가고
mainMenu는 자식태그인 a를 올렸다가 내리는 것
subMenu는 자식태그인 li를 올렸다가 내리는 것
구조
<div class="mainMenu">
<a href="#"><img src="img/menu0.png" alt="" /> </a>
</div>
<div class="subMenu">
<ul class="subMenu_list">
<li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>
</ul>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
body,p,ul,li{
margin:0px; padding:0px; list-style:none;
}
body{
background:url(img/index_back.gif);
}
div#header_wrap{
width:100%; height:122px; background:url(img/header_bg.gif) repeat-x;
}
div#header_center{
width:980px; height:122px; margin:0px auto; position:relative; left:0px; top:0px;
/* 반응형일경우는 해상도가 980px 보다 작을때는 메뉴구조를 새로 바꾸는 것이 좋다 ( 예) 네비게이션 전체를 사라지게 하고 메뉴버튼으로 보이게 */
}
span#logo{
position:absolute; left:0px; top:20px;
}
ul#mainMenu_list>li{
float:left; margin-right:50px; position:relative; left:0px; top:0px;
}
ul#mainMenu_list{
position:absolute; left:250px; top:30px;
}
div.mainMenu{
height:20px; overflow:hidden; position:relative; left:0px; top:0px;
}
div.mainMenu>a{
position:relative; left:0px; top:0px; /* a테그를 움직이게 하므로 반드시 position 값이 존재해야 한다. */
}
div.subMenu{
width:300px; position:absolute; left:0px; top:65px;
}
ul.subMenu_list>li{
float:left; margin-right:10px;
}
</style>
<script type="text/javascript">
var $mainMenu;
var $subMenu;
$(document).ready(function(){
$mainMenu = $(".mainMenu").children();
$subMenu = $(".subMenu");
$subMenu.css("opacity", 0); // 최초에 subMenu들은 안보여야함.
$subMenu.hide(); // 최초에 subMenu들은 안보여야함.
$mainMenu.bind("mouseenter", onOver);
});
function onOver(){
// 기본: 처음에는 모든 $mainMenu 사라지게 하기
$mainMenu.stop();
$mainMenu.animate({"top":0}, 200, "easeOutExpo");
// 기본: 처음에는 모든 $subMenu 사라지게 하기
$subMenu.stop();
$subMenu.animate({"left":0, "opacity":0}, 200, "easeOutExpo", function(){
// opacity가 0이지만, 존재하기때문에 없애주어야함.
$(this).hide();
});
$(this).stop(); // 기존의 이벤트가 있다면 멈춰주기
// 마우스가 올라간 $MainMenu의 top 속성을 위로 올려주기
$(this).animate({"top":-25}, 200, "easeOutExpo");
// 셀럭터 설명
// $(this).parent() => 해당 mainMenu
// $(this).parent().next() => 해당 subMenu
$(this).parent().next().show();
$(this).parent().next().stop();
$(this).parent().next().animate({"left":-30, "opacity":1}, 200, "easeOutExpo", function(){
});
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>서브메뉴네비게이션_웹접근성</title>
</head>
<body>
<div id="header_wrap">
<div id="header_center">
<span id="logo"><a href="#"><img src="img/logo.png" alt="" /></a></span>
<ul id="mainMenu_list">
<li>
<div class="mainMenu">
<a href="#"><img src="img/menu0.png" alt="" /> </a>
</div>
<div class="subMenu">
<ul class="subMenu_list">
<li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>
</ul>
</div>
</li>
<li>
<div class="mainMenu">
<a href="#"><img src="img/menu1.png" alt="" /> </a>
</div>
<div class="subMenu">
<ul class="subMenu_list">
<li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>
</ul>
</div>
</li>
<li>
<div class="mainMenu">
<a href="#"><img src="img/menu2.png" alt="" /> </a>
</div>
<div class="subMenu">
<ul class="subMenu_list">
<li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>
</ul>
</div>
</li>
<li>
<div class="mainMenu">
<a href="#"><img src="img/menu3.png" alt="" /> </a>
</div>
<div class="subMenu">
<ul class="subMenu_list">
<li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_03_off.png" alt="" /></a></li>
</ul>
</div>
</li>
<li>
<div class="mainMenu">
<a href="#"><img src="img/menu4.png" alt="" /> </a>
</div>
<div class="subMenu">
<ul class="subMenu_list">
<li><a href="#"><img src="img/love_01_off.png" alt="" /></a></li>
<li><a href="#"><img src="img/love_02_off.png" alt="" /></a></li>
<li><a href="#" id="last_subMenu"><img src="img/love_03_off.png" alt="" /></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
</body>
</html>