이번 시간은 버거메뉴와 header에 대해서 알아보도록 하겠습니다.
버거메뉴란 아래 이미지처럼 생긴 메뉴로 클릭했을때 header든 메뉴든 뜨게 하는 아이콘 입니다.
해당 버튼을 만들어보도록 하겠습니다.
저 버튼을 누르게 되면 아래와 같이 모양이 x자로 바뀌면서 오른쪽의 메뉴가 호출될 수 있도록 만들 계획입니다.
먼저 오른쪽 메뉴부터 만들어보도록 하겠습니다.
<nav>
<a href="#">HOME</a>
<a href="#">WORKS</a>
<a href="#">ABOUT</a>
</nav>
그리고 article도 이렇게 만들어봅시다.
<article class="trigger-menu">
<h2>버거메뉴</h2>
<a>
<span></span>
<span></span>
<span></span>
</a>
</article>
자 이번시간은 css가 정말 많이 들어갈꺼에요
전에 스크립트부터 짜봅시다.
먼저 const를 통해서 각 트리거메뉴와 메뉴를 각각 이름을 지어줍시다.
그리고 클릭이벤트를 넣어줍니다.
triggerMenu는 햄버거 버튼을 의미합니다.
이 버튼을 누를경우 toggleclass라는 메소드를 이용해서 active를 넣었다가 뺏다가 하는 효과를 줄거에요.
스크립트는 참 쉽죠.?
<script>
const triggerMenu = $('.trigger-menu a');
const menu = $('.trigger-menu nav')
triggerMenu.click(function(){
$(this).toggleClass('active')
menu.toggleClass('active');
console.log(menu.hasClass('active'))
})
</script>
이제 css가 문제인데요.
자 전체 css를 먼저 보여드리겠습니다.
그리고 설명 드리겠습니다.
<style>
.trigger-menu {height:400px}
.trigger-menu > a{
display: block;
width:30px;
position: relative;
}
.trigger-menu > a.active span{
border-top:3px solid #f00;
transform: rotate(45deg);
}
.trigger-menu > a > span{
display:block;
border-top:3px solid #000;
margin:5px 0;
position: absolute;
top:50%; left:0;
width:100%;
}
.trigger-menu > a > span:nth-child(1){
transform: translateY(-7px);
}
.trigger-menu > a >span:nth-child(3){
transform: translateY(7px);
}
.trigger-menu > a.active span:nth-child(1){
transform: translateY(0px) rotate(45deg);
}
.trigger-menu > a.active span:nth-child(2){
opacity:0;
}
.trigger-menu > a.active span:nth-child(3){
transform: translateY(0px) rotate(-45deg);
}
.trigger-menu > nav{
position:fixed;
right:0; top:0;
height:100%;
background-color:#aaa;
color:#fff;
padding:60px;
transform: translateX(100%);
transition: transform 0.5s;
display: flex;
flex-direction: column;
justify-content: center;
}
.trigger-menu > nav.active{
transform: translateX(0%);
}
</style>
먼저 트리거 메뉴의 a 태그 쪽을 먼저 작업해줄꺼에요.
display는 block을 줬고요.
trigger-menu의 a의 span을 통해서
햄버거 버튼 모양을 만들어보겠습니다.
display:block;
border-top:3px solid #000;
margin:5px 0;
position: absolute;
top:50%; left:0;
width:100%;
이렇게 보면 3px의 검정색으로 만들었고 margin을 5px주었습니다.
이것만 하면 검정색 줄이 한줄만 생기겠죠?
.trigger-menu > a > span:nth-child(1){
transform: translateY(-7px);
}
우리는 이제 nth -child를 통해서 첫번째 항목과 세번째 항목에 translateY값을 7px씩 줍니다.
그러면 우리가 원하는 햄버거 모양을 만들 수 있스빈다.
이제 active가 되었을때 어떻게 변화하는지 알아봐야겠죠?
.trigger-menu > a.active span{
border-top:3px solid #f00;
transform: rotate(45deg);
}
먼저 active가 되었을때 span부분의 색깔을 빨간색으로 변경할 것입니다.
그리고
.trigger-menu > a.active span:nth-child(1){
transform: translateY(0px) rotate(45deg);
}
마찬가지로 nth-child를 활용해서 x자 형태로 만들어주면 됩니다.
navigation영역의 경우 아래처럼 만들어 주시면 됩니다.
.trigger-menu > nav{
position:fixed;
right:0; top:0;
height:100%;
background-color:#aaa;
color:#fff;
padding:60px;
transform: translateX(100%);
transition: transform 0.5s;
display: flex;
flex-direction: column;
justify-content: center;
}
이런식으로 햄버거 버튼을 만들어 주시면 잘 동작하는것을 확인할 수 있습니다.
다음은 header를 만들어보도록 하겠습니다.
아래 그림과 같이 메뉴를 만들고
마우스오버를 할시 메뉴가 나타나도록 만들어보겠습니다.
먼저 header를 만들어볼께요
<header>
<ul>
<li>
<a href="#">HOME</a>
<div>
<a>Sub1-1</a>
<a>Sub1-2</a>
<a>Sub1-3</a>
</div>
</li>
<li>
<a href="#">About</a>
<div>
<a>Sub2-1</a>
<a>Sub2-2</a>
<a>Sub2-3</a>
</div>
</li>
<li>
<a href="#">Works</a>
<div>
<a>Sub3-1</a>
<a>Sub3-2</a>
<a>Sub3-3</a>
</div>
</li>
</ul>
</header>
생각보다 간단하죠?
스타일도 살짝 줘보겠습니다.
<style>
header{
background-color: black;
padding:20px 0
}
header ul{
display: flex;
justify-content: center;
}
header a{
color:white;
padding:0 30px;
}
header li{
position:relative;
}
header li div{
position: absolute;
left:0;
/* bottom:0;
transform: translateY(100%); */
top:100%;
background-color: red;
display: none;
}
header li div.active{
display: block;
}
</style>
여기서 header의 li Div쪽 설명이 필요할꺼같네요
li쪽의 position을 relative;로 주고
그 부모의 자식인 div에 position을 absolue로 주는경우
이 자식 div는 부모인 li 영역에서 움직이게 됩니다.
저희는 일단 left를 0으로 주었죠? 그럼 부모 li영역 과 같이 0px에서 그려지게 됩니다.
top을 100%로 주었는데요? 이렇게 되면 부모의 크기만큼 top에서부터 내려가게 됩니다.
만약 top을 0%로 주면 어떻게 될까요? 아래와 같이 부모 영역을 덮어버리게 됩니다.
차이를 아시겠죠?
이제 스크립트를 작성해보도록 하겠습니다.
<script>
const menu = $('li');
const subMenu = $('li > div');
menu.mouseenter(function(){
$(this).find('div').stop().slideDown();
})
menu.mouseleave(function(){
$(this).find('div').stop().slideUp();
})
</script>
여기서 또 주목해야되는 점은 find('div')를 사용했다는 점입니다. 그리고 This를 사용했죠?
만약 그냥 menu.slideDown()을 사용하면 마우스엔터시 내가 원하는 메뉴만 내려가는게 아니라 3가지 메뉴가 한번에 다 내려갔다 올라갔다 하겠죠?
this를 통해서 내가 마우스로 선택한 놈의 메뉴만을 받아올수 있고 해당 메뉴의 자식div의 경우 find로 찾으시면 됩니다.
그래서 내가 원하는 동작을 하는 코드를 쓰시면 됩니다.
jqeury 문법의 경우는 웬만한건 인터넷에 찾으면 나오므로 로직을 이해하는게 더 중요하다고 생각됩니다.
