네이버나 다음이나 레진 등등 거의 대부분의 웹툰 사이트의 모바일 화면에서 화면을 터치, 클릭하면 상단과 하단에 메뉴가 뜨는데 그 기능을 구현한 소스 코드다.
현재 보고 있는 이 블로그의 화면을 터치하거나 클릭하면 위, 아래에 검은 색 배경의 메뉴가 위 아래에 뜰 것이다. 그 소스 코드를 공유하려고 한다.
다음 방식
이 블로그에 적용된 다음 웹툰 모바일 방식이다.
화면을 클릭하면 메뉴가 뜨고 화면, 메뉴를 다시 클릭하거나 스크롤을 하면 메뉴가 사라진다.
그리고 화면의 맨 위 부분에서 화면을 터치, 클릭하면 위의 메뉴는 뜨지 않고 밑의 밑으로 메뉴만 뜨게 했다. 왜냐하면 이미 맨 위에 있기 때문에 맨 위라는 메뉴가 보일 필요가 없다고 생각했다. (이것도 코드를 수정하면 뜨게 할 수 있다. 아마도 scrollTop 20 이부분 5줄에서 6줄 정도를 제거하면 될 것 같은데 확실한 건 모르겠다.)
네이버 방식
네이버 웹툰 모바일의 방식이다.
화면을 클릭하면 메뉴가 뜨고 화면, 메뉴를 다시 클릭하면 메뉴가 사라지는 건 다음 방식과 똑같지만, 스크롤을 해도 메뉴는 사라지지 않는다. 대신 2초를 기다리면 메뉴가 사라진다.
적용하기
워드프레스나 티스토리 같은 블로그 디자인을 어느정도 자유롭게 수정이 가능한 사이트나 블로그만 적용 가능하다.
위의 링크에 기능이 구현된 페이지에 들어가서 마우스 오른쪽을 눌러서 페이지 소스보기를 누르면 어떻게 되어 있는지 대충 알 수 있을것이다.
주석도 달아놨기 때문에 자신의 블로그에 적용하는데 큰 어려움은 없을 거라고 생각한다.
head 사이에 있는 css나 자바스크립트 코드를 자신의 사이트나 블로그의 head 사이에 삽입하면 절반 이상 성공한 것이다.
추가로 기존 소스 코드처럼 어디를 터치하든 메뉴가 뜨게 하려면 영어로 자바스크립트:두디스플레이라고 된 div를 소스 코드처럼 body 안쪽으로 전체 내용을 감싸게 하면 된다. (소스 코드에서는 1과 줄바꿈으로 된 본문 내용 전체를 감싸고 있는 것처럼 말이다.)
그리고 하단에 밑으로를 클릭했을때 정말 화면 밑으로 가게 하거나 원하는 곳으로 가게 하려면 소스 코드처럼 해당 위치에 네임=b라는 a를 삽입하면 된다.
나는 그냥 인터넷에 떠도는 소스들을 짜집기한 수준이라서 전문적인 건 잘 모른다!
디자인이든 기능이든 다 기초적인 자바스크립트와 html과 css를 공부하면 쉽게 수정이 가능하니까 알아서 공부해서 자신만의 스타일로 적용해보도록 하자!
