본문 바로가기
Coding/HTML & CSS

[Html & CSS] 헤더에 있는 햄버거 버튼 꾸미기 및 만드는 방법 !! (+에서 x자 모양) #6

by 포스트it 2024. 3. 8.
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
반응형

댓글