728x90
반응형
[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (동그라미 x자 모양) #9
햄버거 버튼 9째 동그라미안에 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-9 {
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger-9.is-active {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#hamburger-9:before {
content: "";
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 70px;
height: 70px;
border: 5px solid transparent;
top: calc(50% - 35px);
left: calc(50% - 35px);
border-radius: 100%;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger-9.is-active:before {
border: 5px solid #ecf0f1;
}
#hamburger-9.is-active .line {
width: 35px;
}
#hamburger-9.is-active .line:nth-child(2) {
opacity: 0;
}
#hamburger-9.is-active .line:nth-child(1) {
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-9.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-9">
<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] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (옆으로 회전 모양) #10 (0) | 2024.03.25 |
|---|---|
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (+ 플러스 모양) #8 (0) | 2024.03.12 |
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (대각선 모양) #7 (0) | 2024.03.10 |
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (+에서 x자 모양) #6 (0) | 2024.03.08 |
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (v자 모양) #5 (0) | 2024.03.06 |
댓글