스크롤메뉴 구현하기

오늘은 간단한 방법으로 스크롤메뉴를 만들어 보려고 합니다.

• 
• 
• 

웹페이지를 보다보면 특정위치에 메뉴가 고정되있고 마우스를 내리면 따라 내려가는 녀석을 본적이 있으실 텐데요

자바스크립트나 제이쿼리를 사용하지 않고, css만 이용하여 간단하게 구현해 보려고 합니다.

먼저 스크롤 메뉴로 사용할 이미지를 준비하고,

(저는 저작권 무료 아이콘 사이트에서 가져온 이미지로 만들어 보겠습니다.)

html기본 구조를 구성합니다.

body태그안에 아래와 같이 ul/li태그를 구성하고 아이디와 클래스 값을 줍니다.

img src=안에는 메뉴로 사용할 이미지가 있는 폴더의 주소나 사이트 주소를 넣으면 됩니다.

위와 같이 적용하고 html파일을 열어보면

위와 같이 구성됩니다.

그럼 이제 css를 이용하여 꾸며보겠습니다.

ul태그에 liststyle none값을 줘 이미지메뉴 앞에 붙어 있는 도트를 없애고,

scroll아이디에 포지션값은 fixed, top으로 메뉴가 위치할 높이를 설정합니다.

보통 스크롤 메뉴들이 오른쪽에 있기 때문에 right를 주어 오른쪽으로 정렬하였고, 적당한 픽셀을 입력해 위치를 설정합니다.

마지막으로 scroll li태그 a링크 안에 디스플레이 블록을 주고, 메뉴로 사용할 이미지의 크기를 픽셀사이즈로 주면 됩니다.

위와 같이 css값을 주고 다시 html파일을 열어 보겠습니다.

다음과 같이 위치가 설정되고 앞에 붙어있던 도트도 없어졌습니다.

뭔가 허전하네요..

제가 구현해 놓은 메뉴처럼 마우스 커서가 올라갔을 때 이미지 메뉴가 반응한다면 더 보기 좋겠죠^^?

제이쿼리의 후버 기능을 이용하면 아주 간단하게 적용이 가능한데 준비하실 건 이미지 3장만 더 있으면 됩니다!

그럼 변경될 이미지를 준비하시고,(기존 메뉴 이미지 크기와 같아야 합니다.)

아래와 같이 img태그안에 클래스값 적용 후, 변경될 이미지가 있는 주소를 data-over와 함께 입력해 줍니다.

이제 마지막으로 아래와 같이 함수값만 입력해 주면 끝!

위와 같이 입력 후 저장하고 html파일을 열어보면

마우스 커서가 올라가니 선택된 메뉴만 변경되는 것을 확인할 수 있다.

여기에 solid값을 이용해 선을 넣어 메뉴상자형태로 만들거나, 백그라운드컬러를 이용해 색상을 넣을 수 있다.

현재 페이지에 제가 구현해 놓은 스크롤 메뉴는 ul태그값이 먹질 않는지 이미지간격과 도트가 없어지지 않으며,

링크 페이지는 넣지 않았기 때문에 클릭하여도 페이지가 이동되지 않습니다ㅎㅎ