mouseover 기능을 이용한 메뉴 슬라이더 구현

1. 목표

2. 구현 과정

---

1. 목표

[그림 1] 마우스를 'menu1'에 가져갔을 때

완성된 웹 페이지에서 헤더의 'menu1' ~ 'menu4'에 마우스를 가져가면 menu1-1 ~ menu4-4가 나타난다.

 

[그림 2] 마우스를 다른 곳에 가져갔을 때

다시 마우스를 다른 곳에 가져가면 menu1-1 ~ menu4-4는 보이지 않는다.

 

 

2. 구현 과정

[그림 3] 메뉴 슬라이더 HTML, Javascript

HTML은 기초적인 문법으로 구성되었기 때문에 자세한 설명은 생략한다. 하나 언급하자면, 마우스를 가져갔을 때 나타나는 메뉴가 header에 고정되어 있는 메뉴와 독립적으로 존재하는 것이 아니라 ul, li 태그를 이용해 header에 고정되어 있는 메뉴의 하위 항목으로 구성해주었다.

 

script에서 for 문을 쓴 이유는 gnb의 'menu1' ~ 'menu4'를 일일이 쓰는 번거로움을 덜기 위해서이다. for 문을 해석하자면, 'menu1' ~ 'menu4' 중 하나에 마우스를 가져갔을 때 #gnb에 class="on"이라는 속성을 생성하라는 뜻이다.

 

if 문을 해석하자면, 'menu1' ~ 'menu4'에 마우스를 가져간 곳의 id가 gnb일 경우 #gnb의 class="on" 속성을 제거하라는 의미이다.

 

[그림 4] 메뉴 슬라이더 CSS

justify-content: space-evenly; 는 아이템 사이와 양 끝에 균일한 간격을 만들어준다.

 

가상 클래스 선택자 ::before는 실제 내용 바로 앞에서 생성되는 자식 요소를 말한다. #gnb::before에서는 마우스를 가져갔을 때 나타나는 소메뉴의 border-bottom과 box-shadow를 나타내주고, display: none; 처리를 했다.

 

#gnb.on::before에서는 display: block;으로 바꿔주어 마우스를 가져갔을 때에만 소메뉴의 css가 나타나도록 했다.

 

마지막에 li + li 를 적어준 것은 상위에 있는 ul에 속한 4개의 li 중 2, 3, 4번째 li에만 속성을 주기 위해 사용한 것이다. 인접 연산자(+)는 '+' 기호 바로 뒤에 인접해 있는 요소에 속성을 주고 싶을 때 사용한다.