코리아 IT아카데미/Javascript·Jquery~~~
4일차 | jquery(가로메뉴, 세로메뉴 , 애니메이션, 풀다운 메뉴)
Sharon kim
2022. 3. 17. 14:43
외부 제이쿼리
// $(document).ready(function(){});
$(function(){
});가로메뉴.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<style>
/* 기본스타일 */
*{
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
a {
text-decoration: none;
color: #555;
}
/* 메뉴 레이아웃 */
.main_mn {
width: 390px; height: 30px;
border: 2px solid #555;
}
.main_mn > li { float: left; width:130px;
border-bottom: 2px solid #555;
position: relative;
}
.main_mn > li > div {
/* 기본적으로 보여지는 버튼 */
width: 100%;
height: 30px;
background-color: aquamarine;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.main_mn > li > div.act{background-color: cadetblue; color: #fff; transition: 0.7s;}
.sub_mn{position: absolute; top:30px; left: 0px; width: 400px; height: 30px;}
.sub_mn > li{float: left; width: 100px;}
</style>
</head>
<body>
<ul class="main_mn">
<!-- 메뉴1 -->
<li class="mn1">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu1</a></li>
<li><a href="#">s_menu1</a></li>
<li><a href="#">s_menu1</a></li>
<li><a href="#">s_menu1</a></li>
</ul>
</li>
<!-- 메뉴2 -->
<li class="mn2">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu2</a></li>
<li><a href="#">s_menu2</a></li>
<li><a href="#">s_menu2</a></li>
<li><a href="#">s_menu2</a></li>
</ul>
</li>
<!-- 메뉴3 -->
<li class="mn3">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
$(".sub_mn").hide();
//.addClass(); 미리선언된 스타일시트를 선택된 대상에 적용
//.removeClass(); 적용된 스타일시트를 적용을 해제
//$(".main_mn > li").hover();
$(".main_mn > li").mousemove(function(){
//$(this).find(".sub_mn").show();
$(this).find(".sub_mn").stop().slideDown();
});
$(".main_mn > li").mouseout(function(){
//$(this).find(".sub_mn").hide();
$(this).find(".sub_mn").stop().slideUp();
});
$(".main_mn > li > div").hover(
function(){
$(this).addClass("act");
},
function(){
$(this).removeClass("act");
}
)
});
</script>
</body>
</html>세로메뉴.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세로메뉴</title>
<script src="js/jquery.js"></script>
<style>
/* 기본스타일 */
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none; color: #555;}
/* 메뉴레이아웃 */
.main_mn{ margin: 50px;
width: 125px;
border: 2px solid #555;}
.main_mn > li{border-bottom:2px solid #555;}
.main_mn > li > div{width: 100%; height: 30px;
background-color: aquamarine;
text-align: center;
line-height: 30px;
cursor: pointer;}/*기본적으로 보여지는 버튼*/
.main_mn > li > div:hover{background-color: blueviolet;}
.main_mn .sub_mn{border-top:1px solid #ccc;}
.main_mn .sub_mn li{border-top:1px solid #ccc;}
.main_mn .sub_mn li a{font-size: 15px; }
</style>
</head>
<body>
<ul class="main_mn">
<!-- 메뉴1 -->
<li class="mn1">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
<!-- 메뉴2 -->
<li class="mn2">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
<!-- 메뉴3 -->
<li class="mn3">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
<!-- 메뉴4 -->
<li class="mn4">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function(){
$(".sub_mn").hide();// 첫화면일때 모든 서브 숨김
$(".main_mn > li > div").click(function(){
$(".sub_mn").hide();// 현재버튼외에 서브를 숨김
$(".sub_mn").each(function(){//대상 모두를 순서대로 처리
if($(this).show()){ //조건을 보이는 서브메뉴 선택
$(this).hide(); //조건 해당되는 대상 숨김
}
});//대상 모두를 순서대로 처리문
// $(this).next(".sub_mn").show(); // $(this) 상대적인 선택
//$(this).next(".sub_mn").slideDown();
$(this).next(".sub_mn").fadeIn();
});
});
</script>
</body>
</html>
세로메뉴_1.html
다펼쳐짐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세로메뉴</title>
<script src="js/jquery.js"></script>
<style>
/* reset */
*{margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li{list-style: none;}
a{text-decoration: none; color: #555;}
/* 메뉴레이아웃 */
.main_mn{width: 125px;
margin: 50px;
border: 2px solid #555;}
.main_mn > li{border-bottom: 2px solid coral;}
.main_mn li div{width: 100%;
height: 30px;
border-bottom: 1px solid coral;
background-color: antiquewhite;
text-align:center;
line-height: 30px;}
.main_mn li div:hover{
background-color: pink;
}
.sub_mn li a{font-size: 15px;
}
</style>
</head>
<body>
<ul class="main_mn">
<li class="mn1">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
<li class="mn2">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
<li class="mn3">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
<li class="mn4">
<div>menu</div>
<ul class="sub_mn">
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
<li><a href="#">s_menu</a></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function(){
$(".sub_mn").hide();
$(".main_mn li > div").click(function(){
$(this).next(".sub_mn").show(); //$(this) 상대적인 선택
});
});
</script>
</body>
</html>애니메이션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션</title>
<script src="js/jquery.js"></script>
<style>
/* 기본스타일 */
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none; color: #555;}
/* 메뉴레이아웃 */
div{width: 100px; height: 100px;
border: 1px solid #000;}
.box04{position:absolute; top:500px; left:0;}
</style>
<script>
$(document).ready(function(){
//css() 제이쿼리로 스타일 적용하는 메소드;
//css("background-color","red") ,css({background-color:"red",width:"100px";})
//animate({css선언},1000) 1000 = 1초
//.css()부분이 animate()에 적용할때 애니메이션의 시작값을 설정
//.stop() 현재 요소 애니메이션 작동전에 애니메이션들을 중지
//.delay() 애니메이션의대기 시간
$(".box01").css({width:"100px"}).animate({width:"1000px"},1000);
//$(".box02").css("background-color","red").animate("background-color","blue");
$(".box03").css({fontSize:"15px"}).animate({fontSize:"50px"},500);
$(".box04").css({left:"0px"}).animate({left:"1000px"},1000);
$(".box05").css({opacity:0}).animate({opacity:1},500);
});
</script>
</head>
<body>
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
<div class="box04">box04</div>
<div class="box05">box05</div>
<!--
[animate({여기에 들어가는 스타일시트 방식})]
backgroundPositionX
backgroundPositionY
borderBottomWidth
borderLeftWidth
borderRightWidth
borderSpacing
borderTopWidth
borderWidth
bottom
fontSize
height
left
letterSpacing
lineHeight
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
opacity
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
right
textIndent
top
width
wordSpacing
-->
</body>
</html>애니메이션2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션2</title>
<script src="js/jquery.js"></script>
<style>
/* 기본스타일 */
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none; color: #555;}
/* 메뉴레이아웃 */
div{width: 100px; height: 100px;
border: 1px solid #000;}
.box01{position:absolute; top:500px; left:0;}
</style>
<script>
$(document).ready(function(){
$(".box01").delay(2000).css({width:"100px"}).animate({width:"500px"},500);
$(".box01").delay(1000).css({width:"500px"}).animate({width:"100px"},700);
$(".box01").delay(100).css({top:"0px"}).animate({top:"500px"},1000);
$(".box01").delay(100).css({left:"500px"}).animate({left:"0px"},500);
$(".box01").delay(100).css({top:"500px"}).animate({top:"0px"},1000);
$(".box01").delay(2000).css({width:"100px"}).animate({width:"500px"},500,function(){
$(".box01").delay(1000).css({width:"500px"}).animate({width:"100px"},700,function(){
$(".box01").delay(100).css({top:"0px"}).animate({top:"500px"},1000,function(){
$(".box01").delay(100).css({left:"500px"}).animate({left:"0px"},500, function(){
$(".box01").delay(100).css({top:"500px"}).animate({top:"0px"},1000);
});
});
});
});
});
</script>
</head>
<body>
<div class="box01">box01</div>
</body>
</html>애니메이션 메뉴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션 메뉴</title>
<script src="js/jquery.js"></script>
<style>
/* 기본스타일 */
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none; color: #555;}
/* 메뉴레이아웃 */
ul.menu{ margin: 50px; width: 500px; height: 100px;}
ul.menu > li{float: left; width: 100px; height: 100px;
border:1px solid #ccc; box-sizing: border-box;
text-align: center; line-height: 100px;
position: relative;
overflow: hidden;
cursor: pointer;}
.inbox{ width: 100px; height: 100px; background-color: aquamarine;
text-align: center; line-height: 100px;
position: absolute; top:100px; left: 100px;}
</style>
<script>
$(document).ready(function(){
$("ul.menu > li").hover(
function(){
$(this).find(".inbox")
.css({top:"100px",left: "100px"})
.animate({top:"0px",left: "0px"});
},
function(){
$(this).find(".inbox")
.css({top:"0px",left: "0px"})
.animate({top:"100px",left: "100px"});
}
);
});
</script>
</head>
<body>
<ul class="menu">
<li>line
<div class="inbox">inbox</div>
</li>
<li>line
<div class="inbox">inbox</div>
</li>
<li>line
<div class="inbox">inbox</div>
</li>
<li>line
<div class="inbox">inbox</div>
</li>
<li>line
<div class="inbox">inbox</div>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>풀다운메뉴</title>
<script src="js/jquery.js"></script>
<style>
/* 기본스타일 */
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none; color: #555;}
/* 메뉴레이아웃 */
#header{width: 100%; height: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: cadetblue;}
.main_mn{ width: 800px; height: 30px;
border: 2px solid #555;}
.main_mn > li{float: left; width: 25%;border-bottom:2px solid #555;}
.main_mn > li > div{width: 100%; height: 30px;
background-color: aquamarine;
text-align: center;
line-height: 30px;
cursor: pointer;}/*기본적으로 보여지는 버튼*/
.main_mn > li > div:hover{background-color: blueviolet;}
#sub_mn_area{position: absolute; top:150px; left: 0; z-index:9999;
width: 100%; height: 250px; background-color: cornflowerblue;
overflow: hidden; }
#sub_mn_area .inbox{margin: 0 auto; width: 1300px; height: 250px;
background-color: antiquewhite;}
</style>
<script>
$(document).ready(function(){
$("#sub_mn_area").hide();
//$("#sub_mn_area").css({display:"none"});
$(".main_mn").mouseenter(function(){
//$("#sub_mn_area").css({display:"block"});
$("#sub_mn_area").stop().show().css({height:"0px"}).animate({height:"250px"},1000);
});
$("#sub_mn_area").mouseleave(function(){
//$(this).css({display:"none"});
$("#sub_mn_area").css({height:"250px"}).animate({height:"0px"},500,function(){
$(this).hide()
});
});
});
</script>
</head>
<body>
<div id="header">
<ul class="main_mn">
<li class="mn1">
<div>menu</div>
</li>
<li class="mn2">
<div>menu</div>
</li>
<li class="mn3">
<div>menu</div>
</li>
<li class="mn4">
<div>menu</div>
</li>
</ul>
</div>
<div id="sub_mn_area">
<div class="inbox">
<ul>
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
<li><a href="">menu</a></li>
</ul>
</div>
</div>
</body>
</html>