Strength & Honor

반응형 헤더 만들기 (4)

---

그래서 이번에는 좀 바꿔보았다.
html 에서 navbar__tooggleBtn 란을 아래와 같이 바꿔보고

            
    <ul class="navbar_toogleBtn">

    <a href="#" class="navbar__tooggleBtn1" onclick="navbar__menu1(1)">
        <i class="fas fa-bars"></i>
    </a>

    <a href="#" class="navbar__tooggleBtn2" onclick="navbar__menu1(2)">
        <i class="fas fa-hamburger"></i>
    </a>

    <a href="#" class="navbar__tooggleBtn3" onmouseover="navbar__menu1(1)" onmouseleave="navbar__menu1(2)">
        <i class="fas fa-bars"></i>
    </a>

    </ul>
        

CSS 파일에는 아래와 같이 바꿔본다.

        
    .navbar__tooggleBtn {
        font-size: 24px;
        list-style: none;
    }

    .navbar__tooggleBtn1 {
        color: #109e73;
        display: none;
        list-style: none;

    }
    .navbar__tooggleBtn2 {
        color: #af6839;
        display: none;
        list-style: none;
    }

    .navbar__tooggleBtn3 {
        color: #f0da17;
        display: none;
        list-style: none;
    }

    @media screen and (max-width: 800px) {
        
        #navbar__tooggleBtn {
        }

        .navbar__tooggleBtn1 {
            display: block;
            position: absolute;
            right: 52px;
        }

        .navbar__tooggleBtn2 {
            display: block;
            position: absolute;
            right: 32px;
        }

        .navbar__tooggleBtn3 {
            display: block;
            position: absolute;
            right: 12px;
        }
    }
    

마지막으로 자바스크립트 파일의 내용을 아래와 같이 바꿔본다.

        
    function navbar__menu1(status)
    {
        var menu = document.getElementById("navbar__menu1");
        
        if(status==1)
        {
            //메뉴 보이기
            //alert("메뉴 보이기");
            menu.style.display = "block";
        }
        else
        {
            
            //메뉴 감추기
            //alert("메뉴 감추기");
            menu.style.display ="none";
        }
    }
        

그러면 헤더에 아래와 같이 햄버거 아이콘이 3개가 나타나는데 ...



이중 맨 왼쪽의 햄버거 버튼을 클릭하면 메뉴 버튼들이 보여지고



그 다음 오른쪽 햄버거 버튼을 클릭하면 메뉴 버튼들이 감추어진다.
그리고 맨 오른쪽 햄버거 버튼에 마우스를 갖다대면 버튼들이 보여지고 다시 옆으로 치우면 버튼들이 사라진다.

그런데 이건 내가 원래 바랬던 것이 아니었다.
다시 더 공부를 해 봐야겠다.

---