스타벅스 클론(3) - 헤더와 드롭다운 메뉴(2) - 메인메뉴

메인메뉴 부분에 마우스를 대면 드롭다운 효과가 나온 것을 제작해보겠습니다.

 

일단 구조상 분석하면

드롭다운 부분은 전에 inner 너비와 같습니다.

또한 드롭다운이 위 아래 두 부분으로 정리할 수 있어요.

 

html 파일입니다.

items__name은 밑줄 2개가 있습니다.

 

여기서 주의할 점은 inner은 전에 header부분도 사용했습니다.

이거는 header부분의 inner 서로 영향주지 않게 css를 좀 수정해야 됩니다.

 

페이지 열어보면 coffe, menu, store등등 총 6개로 나뉘졌습니다.

item클래스인 li태그도 6개를 만들어야됩니다.

반복되는 거라 여기서 따로 캡처 안 하겠습니다.

 

COFFEE에 마우스 대면 또 크게 위 아래 두 덩어리로 나눠집니다.

그래서 이부분은 contents__menu로 지정했습니다.

위에 html를 보시면 contents__menu에 li가 여러개 있습니다.

이것도 반복되는 거라 따로 캡처하지 않겠습니다.

 

contents__menu를 포함한 모든 css입니다.

 

.main-menu에서 z-index에 값을 부여했습니다.

이게 메인메뉴에 마우스 대면 페이지 하단 오른쪽에 있는 이벤트 포스트를 가려야 하기때문입니다.

 

cursor속성에 pointer도 추가했습니다.

이게 우리 평소에 보는 마우스 모양이 화살표처럼 생겼지만

pointer값을 부여해주면 손모양이 나옵니다.

 

기타 기본적인 내용 설명을 생략하겠습니다.

 

하단에 무늬있는 글들이 있는 구역은 contents__texture로 지정했고

모두 인라인요소들로 지정했습니다.

 

.contents_texture의 css파일입니다.

위에도 얘기했듯이 배경에 무늬가 있었습니다.

background-image에 url로 이미지를 넣어면 됩니다.

repeat란 기본값이 있어서 잘 나오니 기타 속성 그대로 둬도 좋습니다.