CSS - 제이쿼리 내비게이션 메뉴바를 만들어주는 사이트 - 개인용 무료

스타일리시한 내비게이션 메뉴바를 개인용 무료로 사용할 수 있는 사이트를 소개합니다. 블로거에게는 무료입니다. 이곳 을 클릭하면 해당 사이트로 이동합니다.

썸네일 이미지를 클릭하면 다음 화면으로 이동합니다.

데모 화면을 볼 수 있으며 우측에서 색상아이콘을 선택하고 Free Download 버튼을 클릭하면 압축파일로 다운로드 됩니다. 용량도 작아서 웹사이트에 별로 무리가 가지 않습니다. CSS3도 지원하여 그림자효과도 만들어지지만 인터넷익스플로러에서는 구현이 안되는군요. 모두 클릭해서 시험해보니 디자인이 아주 좋습니다. 최근에 생긴 사이트로 생각되는군요. 상업용으로 사용하려면 위에 보이듯이 돈을 지불하면 여러개의 스타일을 한번에 받을 수 있고 색상도 다양하게 포함됩니다. 개인용버전은 애매한 소스코드라고 되어있는데 무엇이 애매하다는 것인지는 아직 파악을 못했습니다. 특징을 보면 다음과 같습니다.


브라우저의 호환성이 있고 자바스크립트 기능을 끄더라도 CSS만으로도 작동됩니다.  
검색엔진 최적화 되어있습니다.
깨끗한 Unordered List 구조입니다.
설치하기 쉽고 업데이트도 가능합니다.
환상적인 애니메이션과 컬러 전환기능(서브메뉴 선택시)이 있습니다.
다양한 색상선택이 가능합니다.
CSS로 사용자가 원하는대로 디자인 할 수 있습니다.
제이쿼리에 의해 작동됩니다.
압축해제시 3kb정도의 아주 작은 사이즈입니다. 

사용해보니 작동이 잘되고 있습니다. 위에 설치한 메뉴가 이곳에서 다운받아 설치한 것입니다. 다만 개인용 무료로 사용하려면 Footer에 크레딧을 달아줘야 합니다. 이것을 제거할 경우 좌측 상단에 "No Back Link"라는 메시지가 출력됩니다. 제 블로그의 하단처럼 작은 글씨로 삽입하면 메시지가 안나타납니다. 

특히 Lava Lamp식으로 메뉴에 마우스오버하면 이미지가 이동하는 것이 재밋습니다. 이런 것이 있으면 방문자가 메뉴에 마우스를 올려보는 시험을 해보게 됩니다. 

설치는 CSS를 아시는 분이라면 쉽게 가능합니다. 압축을 풀면 index파일과 제이쿼리 파일, CSS 스타일 파일, 그리고 이미지 폴더가 있습니다. 인덱스파일에서 메뉴부분을 HTML 코드에 삽입하고 제이쿼리와 CSS 스타일 파일은 링크를 사용하면 됩니다. 

한종류의 메뉴바에서 여러개의 컬러로 다운받아서 이미지 폴더의 이미지파일만 교체하면 간단하게 컬러를 바꿀 수 있네요.  

티스토리 라이브리(LiveRe) 플러그인을 설치하니 오작동이 일어나서 설치를 취소했습니다. 참고하세요.