-
[ css ] 토글버튼 - 메뉴버튼 클릭 시 메뉴가 나타나게 만들기코딩의 즐거움/CSS 2020. 11. 28. 12:00
[ css ] 토글버튼 - 메뉴버튼 클릭 시 나타나게 만들기_ :checked
우리가 사용하는 스마트폰을 떠올려보면
웹페이지를 이용할 때 세줄로 찍찍찍 그어져 있는 이미지를 누르면
메뉴가 나왔던 걸 떠올릴 수 있다.
화면이 작기 때문에 메뉴를 숨겼다가
토글버튼을 누르면 메뉴가 나오도록 만든 건데,
오늘은 쉽게 토글버튼을 구현하는 방법을 적어보려고 한다.
토글버튼 이미지를 클릭하면 메뉴가 나타나고,
토글버튼 이미지를 다시 한번 클릭하면 사라지게끔.
디자인은 무시하고 html로 텍스트만 채워서 만들어보겠다.
html 작성 + 웹페이지 실행 화면
일단 html을 작성하고 저장한 다음
웹페이지를 열어보면 위와 같이 나타난다.
<body>
<label class="menu" for="menu">메뉴</label>
<input id="menu" type=checkbox">
<nav id="main_nav">
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</nav>
</body>
body 안에 적어 넣은 html 코드이다.
여기서 주의할 점은
input은 숨기고,
label로 버튼역할을 하도록 할 거다.
label의 for와 input의 id가 동일해야 한다.
input을 label에 연결시키는 역할을 한다.
웹페이지를 열었으면, label에 적은 메뉴라는 글자를 클릭해보자.
메뉴 글자를 눌렀을 때 input의 체크박스에 브이자 표시로 체크가 되야된다.
한번더 누르면 체크가 사라져야 한다.
그래야 label과 input이 정상적으로 연결된 것이다.
nav > ul > li > a 안에 적은 내용은 메뉴를 적은 것이다.
style 태그에 label 디자인
<style>
label.menu{
border: 1px solid black;
padding: 40px;
}
</style>
head 태그 안에 css 코드를 작성하기 위해 style 태그를 적어줬다.
우선 label 먼저 디자인을 해보자.
메뉴를 클릭했을 때 내용물이 나타났다 사라졌다를 구현하는 것이 목적이다.
간단하게 border로 1픽셀 솔리드 검정색상을 부여해서 테두리를 만들어줬고,
이렇게만 하면 테두리가 글씨에 너무 딱 달라붙어 있기 때문에,
안쪽 여백으로 padding 전체(위,오른쪽,아래,왼쪽) 4픽셀을 주었다.
아 class="menu"로 선택자를 부여했는데
label.menu로 앞에 label을 적어준 이유는
헷갈리지말라고 label이라는 걸 알려주려고 보기 쉽도록 적어준 것이기 때문에
안적어도 상관없다.
style 태그에서 input 없어지도록 코드작성
<style>
input#menu{
display: none;
}
</style>
input은 체크박스 기능만 살리고 안보이도록 숨겨줘야되기 때문에
display: none;
을 적어주면 없어진다.
위 이미지를 보면 빨간색 선으로 그어진 부분이 원래 체크박스가 있던 위치이다.
style 태그에서 nav 전체 안보이게 숨기기
<style>
nav#main_nav{
display: none;
}
</style>
#main_nav에 display: none;을 주면
그 안에 포함되어 있던 ul > li > a도 모두 없어진다.
input과 nav를 숨겨줬기 때문에
label만 남게 된다.
label 클릭 시 메뉴가 나타나고 사라지도록 만들기
<style>
input#menu:checked + nav#main_nav{
display: block;
}
</style>
인풋과 라벨이 연결되어 있기 때문에
인풋을 체크(클릭) 하면 input#menu:checked
인풋 바로 다음에 나오는 +
메인 메뉴가 nav#main_nav
전체 블럭형태로 보여지도록 해라 display : block;
인풋의 특성상 다시한번 누르면 체크가 사라지기 때문에
라벨의 메뉴버튼을 한번 더 클릭 하면 메뉴가 사라지게 된다.
글이 굉장히 긴데
헷갈릴까봐 내용을 전부 삽입해서 이미지가 길어져서 그렇지
읽어보면 알겠지만 어렵거나 복잡한 내용은 아니다.
마지막으로 우리가 자주보던 토글버튼은
이미지로 삽입하면 된다. 어디에다가?
<body>
<label class="menu" for="menu">
<img src="image/이미지명.확장자 alt="토글버튼">
</label>
</body>
라벨 안에 메뉴글씨를 없애고 이미지를 삽입해주면 된다.
끝.
'코딩의 즐거움 > CSS' 카테고리의 다른 글
[ 코딩 ] css background 속성 (0) 2020.12.08 [ 코딩 ] css display 속성 (0) 2020.12.05 [ CSS ] 후손 선택자와 자손 선택자 (0) 2020.11.24 [ CSS ] CSS padding 과 margin 적는 순서 + 차이 (0) 2020.11.10 [ CSS ] CSS 처음 시작하기_CSS 작성 방법 (0) 2020.11.09