서브네비게이션 메뉴 focus 이벤트
메인메뉴 버튼 이미지들
실제 화면
<!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;
var overNum;
// 실제로 sub메뉴가 다양할 경우, 바로 밑에 생기면, 모양이 이상하므로,
// left 값을 여러개 넣어서 바꿔줌
var subPosition = [-100,-80,0,-20,100];
$(document).ready(function(){
$mainMenu = $(".mainMenu>a");
$subMenu = $(".subMenu");
// 처음에는 안보이게 해주기
$subMenu.css("opacity", 0);
$subMenu.hide();
$mainMenu.bind("mouseenter", onOver);
$mainMenu.bind("focus", onOver);
// 맨 마지막 sub메뉴에서 탭키 눌렀을때, 화면 사라지게 이벤트 걸기
$(".subMenu_list").last().children().last().bind("focusout", onOut);
// 메뉴 밖으로 벗어나면 메뉴 활성 사라지게 이벤트 걸기
$("#header_center").bind("mouseleave", onOut);
});
function onOver(){
// mainMenu들 중에서 해당 over된 mainMenu의 번호를 알아내기
overNum=$mainMenu.index($(this));
//alert(overNum)
// 최초 세팅으로 over되기 전으로 해놓기
mainOut();
subOut();
// over이벤트 걸어주기
mainOver($(this));
subOver($(this));
}
function onOut(){
mainOut();
subOut();
}
function mainOver(newMenu){
newMenu.stop();
// 1장의 메인버튼 이미지 사진이 hover느낌전후과 위아래로 붙어있으므로, 이것을 top을 통해서 전환 시켜줌
newMenu.animate({"top":-25}, 300, "easeOutCubic");
}
function mainOut(){
$mainMenu.stop();
// 1장의 메인버튼 이미지 사진이 hover느낌전후과 위아래로 붙어있으므로, 이것을 top을 통해서 전환 시켜줌
$mainMenu.animate({"top":0}, 300, "easeOutCubic");
}
function subOver(newMenu){
newMenu.parent().next().show();
newMenu.parent().next().stop();
newMenu.parent().next().animate({"left":subPosition[overNum], "opacity":1}, 300, "easeOutCubic");
}
function subOut(){
$subMenu.stop();
$subMenu.animate({"left":0, "opacity":0}, 300, "easeOutCubic", function(){
$(this).hide(); // opacity가 0인 것은 실제로 존재는 하기때문에 사라지게 하기
})
}
</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>
</body>
</html>
반응형 슬라이드-resize, setInterval
슬라이드 기능이 화면을 줄였을때 반응형으로 작동하게 만들기
<!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>슬라이드이미지 _버튼</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">
html,body{
height:100%;
}
body,p,ul,li{
margin:0px; padding:0px; list-style:none;
}
body{
background:url(../images/index_back.gif);
}
div#slide_wrap{
width:100%; height:80%; background:#CCC; margin-top:100px;
}
div#slide_center{
width:80%; margin:0px auto; position:relative; left:0px; top:0px;
}
ul#img_list{
position:absolute; left:0px; top:0px; width:100%;
}
ul#img_list li{
float:left;
}
ul#img_list li img{
display:block; width:100%;
}
span#prev_btn{
position:absolute; left:-5px; top:40%;
}
span#next_btn{
position:absolute; right:-5px; top:40%;
}
</style>
<script type="text/javascript">
var $slideWrap;
var $slideCenter;
var $imgList;
var $imgs; // 슬라이드 이미지들
var $btnImg // 버튼 이미지
var imgNum; // 슬라이드 이미지의 총 개수
var imgWidth; // 해당 슬라이드안의 1개 이미지의 너비
var imgHeight; // 해당 슬라이드안의 1개 이미지의 높이
var currentPosition; // 현재 움직여줄 ul의 좌표
var myInterval; // interval 담을 변수
// 반응형 jquery는 document ready가 아니라, window ready이다.
$(window).load(function(){
$slideWrap = $("#slide_wrap");
$slideCenter = $("#slide_center");
$imgList = $("#img_list");
$images = $("#img_list img");
// #slide_center 아래 span 아래 img들
$btnImg = $("#slide_center span img");
resizeReset();
// 최초 세팅: 맨마지막 사진을 첫번째 사진 앞에다가 붙여주기
$imgList.children().last().prependTo($imgList);
// 자동적으로 슬라이드가 next버튼 누른 것처럼 변하게 하는 interval 만들기
myInterval = setInterval(onNext, 2000);
// 사진에서 마우스가 떠나면, 슬라이드 넘기는 이벤트 멈추기
$slideWrap.bind("mouseleave", onPlay);
// 사진에서 마우스가 올라가면, 슬라이드 넘기는 이벤트 시작
$slideWrap.bind("mouseenter", onStop);
$("#prev_btn").bind("click", onPrev);
$("#next_btn").bind("click", onNext);
});
function onStop(){
clearInterval(myInterval);
//alert("myInterval1: " + myInterval);
}
function onPlay(){
myInterval = setInterval(onNext, 2000);
}
function onNext(){
currentPosition = $imgList.position().left;
// left를 이미지 사진만큼 이동해주면, 사진이 바뀌는 효과를 갖게됨
$("#img_list:not(:animated)").animate({"left":currentPosition-imgWidth}, 300, "easeOutCubic", function(){
// 맨첫번째 이미지가 이미지리스트의 맨 마지막에 이동하기
$imgList.children().first().appendTo($imgList);
// 사진이 이동한만큼 위치도 당겨주어야함
$imgList.css("left", -imgWidth);
});
}
function onPrev(){
currentPosition = $imgList.position().left;
// left를 이미지 사진만큼 이동해주면, 사진이 바뀌는 효과를 갖게됨
$("#img_list:not(:animated)").animate({"left":currentPosition-imgWidth}, 300, "easeOutCubic", function(){
// 맨 마지막 이미지가 이미지리스트의 맨 처음에 이동하기
$imgList.children().last().prependTo($imgList);
// 사진이 이동한만큼 위치도 당겨주어야함
$imgList.css("left", +imgWidth);
});
}
// window를 resize할때(화면의 크기가 재조정 될때)
$(window).resize(function(){
resizeReset();
});
// 반복되는 내용을 함수화 해서, 이렇게 정리해서 사용
function resizeReset(){
imgWidth = $slideCenter.innerWidth();
//alert(imgWidth);
// 슬라이드 돌릴 이미지들의 크기를 전부 imgWidth 크기만큼 바꿔야함
$images.css("width", imgWidth);
// 반응형이기때문에 이미지 높이도 맞추어줘야함
imgHeight=$images.height();
// 슬아이드 화면 전체의 높이 세팅
$slideCenter.css("height",imgHeight);
// 슬아이드를 감싸는 전체의 높이 세팅
$slideWrap.css("height", imgHeight);
// 슬라이드 화면을 이미지의 높이만큼 바꿔야함
$slideWrap.css("height", $images.innerHeight());
// 슬라이드 버튼도 이미지를 기준으로 너비의 20분의 1로 만듦
$btnImg.css("width", imgWidth/20);
// 이미지 개수
imgNum = $images.size();
//alert(imgNum);
// 이미지 리스트의 너비가 전체 이미지 너비 * 개수
$imgList.css("width", imgWidth * imgNum);
// 최초 세팅: 맨마지막 사진을 첫번째 사진 앞에다가 붙여주기
//$imgList.children().last().prependTo($imgList);
// 최초 세팅: 첫번째 사진이 보여야하므로 위치를 사진의 너비만큼 왼쪽으로 이동
$imgList.css("left", - imgWidth);
}
</script>
</head>
<body>
<div id="slide_wrap">
<div id="slide_center">
<ul id="img_list">
<li><img src="../images/img1.gif" alt="" /></li>
<li><img src="../images/img2.gif" alt="" /></li>
<li><img src="../images/img3.gif" alt="" /></li>
<li><img src="../images/img4.gif" alt="" /></li>
</ul>
<span id="prev_btn"><img src="../images/leftbtn.png" alt="" /></span>
<span id="next_btn"><img src="../images/rightbtn.png" alt="" /></span>
</div>
</div>
</body>
</html>