반응형
[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (-자 모양) #2
햄버거 버튼 2번째 일자모양 입니다 !
예제코드
<!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-2.is-active .line:nth-child(1) {
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-2.is-active .line:nth-child(3) {
-webkit-transform: translateY(-13px);
-ms-transform: translateY(-13px);
-o-transform: translateY(-13px);
transform: translateY(-13px);
}
</style>
</head>
<body>
<div class="container">
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-2">
<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] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (->자 모양) #4 (0) | 2024.03.02 |
|---|---|
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (<-자 모양) #3 (0) | 2024.03.01 |
| [Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (x자 모양) #1 (0) | 2024.02.26 |
| [Html & CSS] 헤더 항상 위에 고정 시키는 방법 !! (header sticky 주는 방법) (0) | 2024.02.23 |
| [Html & CSS] 백그라운드(background-color) 투명하게 만드는 방법 !! (0) | 2024.01.02 |
댓글