VScode/JQuery
[JQuery] menu생성, animate
hvoon
2022. 9. 9. 14:57
Tabmenu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabmenu.html</title>
<style type="text/css">
#tabs{position:relative; margin:100px auto; width:1080px;
height:40px; text-align:center; margin-bottom:0;}
ul{list-style: none; padding:0; margin:0;
display:inline-block;}
ul li{width:180px; height:40px; float:left;
border-radius:5px 5px 0 0; line-height:40px;
text-align:center; font-size:120%;
cursor:default; /* border:1px dashed black; */}
#content{position:relative; margin:0 auto; width:1080px;
height:440px; }
.contents{position:absolute; width:1080px; height:440px;
left:0px; top:0px; line-height:440px;
text-align: center; font-size: 120%;}
#content1{background: #ebaa55;}
#content2{background: #55ebd1; display:none; }
#content3{background: #4fbde3; display:none; }
#content4{background: #6ebe6d; display:none; }
#content5{background: #95a096; display:none; }
#content6{background: #ed8d2a; display:none; }
</style>
<script src="script/jquery-3.6.0.js"></script>
<script src="script/jquery.innerfade.js"></script>
<script type="text/javascript">
// 제이쿼리 명령을 이용하여 ul li들을 해당위치에 배치하고
// 각 배경색을 해당 색깔로 맞춤.
// 아래 content들을 해당위치에 모두 겹쳐서 배치
// 탭메뉴(ul li) 중 하나를 클릭하면 content를 보이게(show())하고
// 나머지를 감싸줌(hide())
$(function(){
$('li:eq(0)').css('background-color','#ebaa55');
$('li:eq(1)').css('background-color','#55ebd1');
$('li:eq(2)').css('background-color','#4fbde3');
$('li:eq(3)').css('background-color','#6ebe6d');
$('li:eq(4)').css('background-color','#95a096');
$('li:eq(5)').css('background-color','#ed8d2a');
// 선택된 li의 인덱스값으로 'content'+index 연산으로
// show 될 content를 지정(select)함
$('li').click(function(){
var num=$(this).index()+1;
$('.contents').hide();
$('#content'+num).show();
})
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
<li>Menu D</li>
<li>Menu E</li>
<li>Menu F</li>
</ul>
</div>
<div id="content">
<div class="contents" id="content1">Content A</div>
<div class="contents" id="content2">Content B</div>
<div class="contents" id="content3">Content C</div>
<div class="contents" id="content4">Content D</div>
<div class="contents" id="content5">Content E</div>
<div class="contents" id="content6">Content F</div>
</div>
</body>
</html>
slidemenu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SideMenu.html</title>
<style type="text/css">
body{background:royalblue;}
a{text-decoration: none; display: block; font-size: 40px;
margin:5px 0; color:white; transition:0.5s;}
.gnb{position:absolute; top:100px; left:50px;}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
// 메뉴에 마우스가 올라가면 해당 메뉴는 opacity를 1로 변경.
// 나머지 메뉴는 0.3으로 변경
// 메뉴 영역에서 마우스가 완전히 빠져나가면
// 모든 메뉴의 opacity를 1로 변경
$(function(){
$('a').mouseenter(function(){
var num=$(this).index();
$('a').css('opacity','0.3');
$('a').eq(num).css('opacity','1');
});
$('div').mouseleave(function(){
$('a').css('opacity','1');
});
});
</script>
</head>
<body>
<div class="gnb">
<a>New arrivals</a>
<a>Summer Collection</a>
<a>Winter Collection</a>
<a>Special Offers</a>
<a>Trends</a>
</div>
</body>
</html>
$(선택자).animate({속성명,값})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate.html</title>
<style type="text/css">
div {width:50px; height:50px; margin:3px;
background-color: orange; position:relative;}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
// 각 div에 마우스가 올라가면 현재 위치에서
// left 값을 500으로 설정해서 오른쪽으로 이동.
// 마우스가 빠져나가면 제자리로 돌아옴.
$(function(){
/*
$('div').mouseenter(function(){
$(this).animate({left:500},1000);
})
$('div').mouseout(function(){
$(this).animate({left:0},1000);
})
*/
$('div').hover( // mouseenter와 mouseout 동시 이벤트
function(){$(this).animate({left:500},1000);},
function(){$(this).animate({left:0},1000);}
);
// $(this).css('left','500px');
// 자체적 transition-duration이 없음
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
