CSS 응용(1) - 햄버거 버튼(메뉴바) 만들기

이번 포스팅에서는 css를 활용해 메뉴바를 만들어 보고자 한다. 웹페이지 상에서 마우스 커서에 반응하여 움직이는 메뉴바를 많이 본 적이 있을 것이다. 아래와 같이 생긴 메뉴바 혹은 버튼을 일명 "햄버거 버튼" 이라고 하는데 이 버튼을 클릭했을 때 세부 메뉴 항목들이 나올 수 있게끔 html과 css 코드를 작성해 보고자 한다.

위의 그림처럼 메뉴바를 클릭했을 때 세부 메뉴 영역이 표출되면서 메뉴바의 모양이 X 모양으로 변하는 효과를 넣어보고자 한다. 과정을 따라가면서 새롭게 등장하는 css 속성들은 그때 그때 언급하면서 알아가보도록 하자.

우선 첫째로 햄버거 버튼 모양을 만들어야 하는데, 필자는 다음과 같은 과정을 통해 만들었다. div영역을 만들고 <span>을 이용해 높이 5px 짜리 선들을 만들어서 각각의 위치에 표현하고자 한다. 여기서 <label>과 <span>은 인라인 속성이므로 높이(height)와 넓이(width)를 주기 위해서는 display: block;을 줘야 함을 잊지 말자. html 코드와 css 코드를 작성해 보면 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href=".\css\index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <input type="checkbox" id="icon">
    <label for="icon">  <!--label은 인라인 스타일-->
        <span></span>
        <span></span>
        <span></span>
    </label>
</body>
</html>

/* CSS style sheet */

*{
    margin:0;
    padding:0;
}

input[id="icon"] {
    display: none;
}

input[id="icon"] + label {
    display:block;
    width: 60px;
    height: 40px;
    cursor:pointer;
}

input[id="icon"] + label > span {
    display:block;
    height:5px;
    width:100%;
    border-radius:30px;
    background: black;
}

<input> 엘리먼트 아래에 있는 <label>엘리먼트에게 속성을 부여하기 위해 인접 접근자 +를 사용하여 나타내었고 <span>을 이용해 선을 표현하기 위해 display:block;으로 높이와 넓이를 조절하였다. 또한 선의 양끝 모서리가 둥그렇게 깎인 것을 확인할 수 있는데 해당 효과는 border-radius: 30px;을 이용해 부여한 것이다.

cursor:pointer;를 이용해서는 <label> 엘리먼트 영역에 마우스 커서를 갖다 놓았을 때, 해당 영역이 클릭 가능한 영역이라는 것을 드러내기 위해 커서의 모양을 바꿔주는 효과를 부여했다.

이제 해당 선들을 일정하게 떨어뜨려 줘야 할 것이다. css 내용을 조금 더 추가해 보자.

/* CSS style sheet */

*{
    margin:0;
    padding:0;
}

input[id="icon"] {
    display: none;
}

input[id="icon"] + label {
    display:block;
    width: 60px;
    height: 40px;
    cursor:pointer;
    position:relative;
}

input[id="icon"] + label > span {
    display:block;
    height:5px;
    width:100%;
    border-radius:30px;
    background: black;
    position:absolute;
}


input[id="icon"] + label > span:nth-child(1) {
    top:0;
}

input[id="icon"] + label > span:nth-child(2) {
    top:50%;
    transform:translateY(-50%);
}

input[id="icon"] + label > span:nth-child(3) {
    bottom:0;
}

위의 css 내용을 살펴보면 다음과 같은 내용을 찾아볼 수 있다.

<label>엘리먼트에는 position:relative;를 부여했고 <label> 안에서 각각의 선들로 표현된 <span>엘리먼트에는 position:absolute;를 부여하였다. 이 관계는 하나의 공식처럼 기억하도록 하자. 부모 엘리먼트에 position:relative; , 자식 엘리먼트 안에 position:absolute;가 있을 경우, absolute가 <body> 영역 안에서 움직이는 것이 아닌 부모 영역 안에서 움직이게 된다. absolute를 부모 영역 안에서 움직이고 싶은 경우 부모에게 relatve, 자식에게 absolute를 선언해서 css를 적용하면 된다.

input[id="icon"] + label > span:nth-child(2) { } 에 작성되어 있는 transform:의 경우 엘리먼트를 변형할 때 주로 사용하는 css이다. 엘리먼트를 비틀거나 구부리거나 돌리고자 할 때 사용한다. 여기에서는 translateY(-50%)에 의해 위치를 변경하게 되었는데 자기 크기의 50%만큼 위로 올라가게 되었다. 이로써 input[id="icon"] + label > span:nth-child(2) { top:50%; translateY(-50%) } 에 의해 두번째 <span>은 정가운데에 위치하게 되고 첫번째 <span>과 세번째 <span>은 top:0; , bottom:0; 에 의해 각각 위와 아래에 위치하게 되었다.

+) transform:translate( ) 속성에 대해 조금 더 알아보자.

이 속성은 해당 요소를 X축 또는 Y축으로 이동시키고자 할 때 사용하는 속성이다. 괄호( ) 안에 얼마만큼 이동시키고 싶은지 입력하면 된다. 작성 형식은 다음과 같다.

transform:translateX(20px); : X축으로 20px 만큼 이동.
transform:translateY(-10px); : Y축으로 -10px 만큼 이동.
transform:translate(20px, -10px); : X축으로 20px, Y축으로 -10px 만큼 이동.

앞에서 사용한 transform:translateY(-50%); 는 자기 크기의 50%만큼 위로 이동시키겠다는 의미이다.

다음 스텝으로 메뉴바를 클릭했을 때, 숨겨져 있던 세부 메뉴 항목들이 드러나게끔 코드를 작성해 보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href=".\css\index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <input type="checkbox" id="icon">
    <label for="icon">  <!--label은 인라인 스타일-->
        <span></span>
        <span></span>
        <span></span>
    </label>
    <div id="header">
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu1</a></li>
        </ul>
    </div>
</body>
</html>

기존의 html 코드에서 메뉴 영역에 해당하는 새로운 <div>를 만들고 <ul>, <li>를 사용해 영역 안에 메뉴 리스트를 생성해 보았다.

input[id="icon"] {
    display: none;
}

body{
    height:3000px;
}

input[id="icon"] + label {
    display:block;
    width: 60px;
    height: 40px;
    cursor:pointer;
    position:relative;
    z-index:2;
}

input[id="icon"] + label > span {
    display:block;
    height:5px;
    width:100%;
    border-radius:30px;
    background: black;
    position:absolute;
}


input[id="icon"] + label > span:nth-child(1) {
    top:0;
}

input[id="icon"] + label > span:nth-child(2) {
    top:50%;
    transform:translateY(-50%);
}

input[id="icon"] + label > span:nth-child(3) {
    bottom:0;
}

input[id="icon"] + label + #header {
    position:fixed;
    width:150px;
    height:100%;
    background:#333;
    padding:60px 25px 25px 25px;
    box-sizing:border-box;
    top:0;
    z-index:1;
}

#header에 css를 적용하여 기본 포맷을 만들었고 input[id="icon"] + label 에 z-index:2;를 적용하고 input[id="icon"] + label + #header에 z-index:1;을 적용해 겹쳐지게 만들었다. 그 후 input[id="icon"] + label + #header에 메뉴바의 넓이 만큼 left:-150px;을 줘서 메뉴바를 화면 바깥으로 숨겨 놓았다. 그리고 position:fixed;를 사용해서 스크롤을 내리더라도 같은 위치에서 붙어다니도록 설정하였다.

마지막으로 햄버거 버튼을 클릭했을 때 세부 메뉴바가 등장하게끔 하기 위해 css 코드에 다음 내용들을 추가하였다.

input[id="icon"]:checked + label > span:nth-child(1) {
    top:50%;
    transform:translateY(-50%) rotate(45deg);
}

input[id="icon"]:checked + label > span:nth-child(2) {
    display:none;
}

input[id="icon"]:checked + label > span:nth-child(3) {
    bottom:50%;
    transform:translateY(50%) rotate(-45deg);
}


input[id="icon"]:checked + label + #header {
    left:0;
}

input[id="icon"]:checked를 이용해서 input박스를 클릭할 때 작성된 css가 적용되게끔 코드를 구성하였다. 또한 transform:translateY( ) rotate( ); 을 이용해 메뉴바에 위치한 선들이 움직이면서 X자 모양으로 변하게 하였고 input[id="icon"]:checked + label + #header { left:0; } 을 이용해 input 박스를 클릭했을 때 header 영역의 위치가 left:-150px 에서 left:0px;이 되어 화면에 나타나게끔 하였다.

+) transform:rotate( ); 은 해당 요소를 지정된 각도만큼 회전시키는 css 속성이다. 괄호( ) 안에 각도를 입력하게 되는데 플러스 값일 경우 시계방향, 마이너스 값일 경우 반시계 방향으로 회전하게 된다. 작성 형식은 다음과 같다.

transform:rotateX(Ndeg) : X축 기준으로 N도 만큼 회전.
transform:rotateY(Ndeg) : Y축 기준으로 N도 만큼 회전.
transform:rotate(Ndeg) : N도 만큼 회전.

마지막으로 transition: all 0.35s; 를 input[id="icon"] + label > span { } 과 input[id="icon"] + label + #header { } 에 추가로 작성해준다. transition: all 0.35s;는 진행되는 과정들을 천천히 보여줄 수 있는 css 속성이다. 해당 css를 적용하면 0.35초 동안 진행되는 과정들을 눈으로 확인할 수 있다.

이제 최종 결과물을 확인해 보자. 제대로 잘 작동하는 것을 확인할 수 있다.

See the Pen Untitled by bitkunst (@bitkunst) on CodePen.

'CSS' 카테고리의 다른 글

CSS 응용(2) - layer popup 만들기 (0)	2021.12.28
CSS skills(3) - !important , class 여러 개 주기 , input:focus { } (0)	2021.12.28
CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child (0)	2021.12.27
CSS skills(1) - display, float, position (0)	2021.12.22
CSS 문법 (0)	2021.12.21

'CSS' 카테고리의 다른 글

티스토리툴바