728x90
반응형
[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (+에서 x자 모양) #6
햄버거 버튼 6번째 +에서 x자로 변하는 모양 입니다 !
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.col {
display: block;
float: left;
}
.col:first-of-type {
margin-left: 0;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
.row .three {
padding: 30px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #145327;
color: #ecf0f1;
text-align: center;
}
.hamburger .line {
width: 50px;
height: 5px;
background-color: #ecf0f1;
display: block;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger:hover {
cursor: pointer;
}
#hamburger-6.is-active{
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#hamburger-6.is-active .line:nth-child(2){
width: 0px;
}
#hamburger-6.is-active .line:nth-child(1),
#hamburger-6.is-active .line:nth-child(3){
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#hamburger-6.is-active .line:nth-child(1){
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-6.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(90deg);
-ms-transform: translateY(-13px) rotate(90deg);
-o-transform: translateY(-13px) rotate(90deg);
transform: translateY(-13px) rotate(90deg);
}
</style>
</head>
<body>
<div class="container">
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$(".hamburger").click(function () {
$(this).toggleClass("is-active");
});
});
</script>결과
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (+ 플러스 모양) #8 (0) | 2024.03.12 |
|---|---|
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (대각선 모양) #7 (0) | 2024.03.10 |
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (v자 모양) #5 (0) | 2024.03.06 |
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (->자 모양) #4 (0) | 2024.03.02 |
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (<-자 모양) #3 (0) | 2024.03.01 |
댓글