https://www.youtube.com/watch?v=XZsuI5wyRzs
위 유투브 영상보고 따라했습니다.
기존 데스크탑전용 메뉴
div.top-menu
ul.navbar-left
li.nav-list
a
ul.navbar-right
li.nav-list
a모바일에도 보이는 반응형 메뉴
font awesome icon에서 menu로 검색해서
맘에 드는거 골라서
i 태그만 복사해옵니다.
당연히 이거 쓰려면 Font Awesome CDN이 있어야 겠죠. <head>에 cdn를 추가해줍니다.
div.top-menu
div.toggle
i
ul.navbar-left
li.nav-list
a
ul.navbar-right
li.nav-list
a데스크탑에서 li태그는 display이라 stack 처럼 쌓여요.
가로로 놓기 위해서 li가 차지하는 크기만큼만 가로크기를 차지하게끔 display를 inline-block으로 할 수 있습니다.
아니면 float 속성을 하면 됩니다.
그리고 li의 a태그를 수직 가운데 정렬을 하기 위해서 navbar의 height === li의 line-height
같게 맞춤으로써 수직정렬이 됩니다.
.top-menu ul li {
display: inline-block; <-
line-height: 60px; <-
margin-right: 20px;
}@media css 미디어 쿼리를 이용해서 1024px보다 작을 경우에는 아래 css 속성을 덮어씌우라는 얘기죠.
여기서 데스크탑에 보여준 ul태그들 display를 none으로 시켜서 toggle bar만 보이게 합니다(display:none).
물론 데스크탑에서는 .toggle의 display가 none이여야겠죠.
@media (max-width: 1024px) {
...
.toggle{
display: block;
height: 60px;
}font awesome에서 가져온 아이콘을 클릭하면
li태그가 stack 처럼 쌓이게 하기 위해 js코드를 좀 추가합니다.
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuButton = document.querySelector('.toggle__btn');
const navbarLeftList = document.querySelector('.navbar-left');
const navbarRightList = document.querySelector('.navbar-right');
menuButton.addEventListener('click', () => {
navbarLeftList.classList.toggle('toggle__list-active');
navbarRightList.classList.toggle('toggle__list-active');
})
});
</script>toggle을 해줌으로써 toggle__list-active이름의 css 클래스가 ul태그에 클릭이벤트를 통해 추가되었다가 빠지게 되는거죠.
.toggle__list-active {
display: block;
}
서로 아는 것들을 공유해요~