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


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


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


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

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

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

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

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

티스토리 라이브리(LiveRe) 플러그인을 설치하니 오작동이 일어나서 설치를 취소했습니다. 참고하세요.
저작자 표시 비영리 변경 금지
신고
BlogIcon 이츠하크

역쉬! 이것도 스타일리쉬하고 다이나믹한 블로그 스킨을 만들때 아주 유용하겠네요.
한번 시도해 보아야 겠습니다. 이런 공부는 참 재미있더라구요. 고맙습니다. 베누시안님!!

BlogIcon 베누시안

안녕하세요. 단순한 블로그에 적용하면 재밋을것 같네요. 댓글 감사합니다~

BlogIcon 글쓴이입니다

여기 홈페이지에 올때마다 신기한게 많네요. 이런쪽은 잘 몰라서 적용하기 참 힘들다는..;; 아하하~

BlogIcon 베누시안

안녕하세요. 반갑습니다. 블로그를 멋지게 만들어보려고 이것저것 하다보니 그렇게 되네요. 댓글 감사드려요~^^

BlogIcon 靑坡

안녕하세요...베누시안님!
저도 제이쿼리에 관심이 많아서 제 블로그에도 여러곳 사용중에 있습니다.
티스토리 블로그 만들면서 포스팅 보다는 이곳에 관심이 더가고 재미가 있더라구요.
우연히 베누시안님 블로그에 와서 알게 되었는데 링크를 사용하는 방법이 있군요.
저 같은 경우에는 스크립트 파일을 열어 소스전체를 편집창에 넣어 사용을 했는데....이런 간단한 방법이 있는줄은 몰랐습니다...(참고로 전 이방면에 기초가 없는상태에서 시도를 해본 경우이죠)
해서 여쭈어 보는데 링크 사용하는 방법은 어떻게 하는건가요?
나이먹고 소일거리로 하다보니 재미있어 관심을 가지게 되었지요.
답답하다 생각 드시더라도 자세한 설명 부탁 드리겠습니다..^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 링크란 어떤 부분을 말씀하시는지요? 메뉴부분인가요?

BlogIcon 靑坡

베누시안님!
궁금했던 문제 이제 알았습니다.
스크립트 파일 업로드 방법을 몰라서 여쭈어 본건데...베누시안님이 쓰신 다른 포스트 보고 문제 해결했습니다...
JS 파일을 스킨 편집창에서 파일 업로드하고 HTML 편집창에서 코드 삽입할 떄 ./IMAGES 부분을 몰라서 여쭈어 본겁니다.
그렇게 해보았더니 깔끔하게 작동이 되더군요.
그동안 저는 이 방법을 몰라서 스크립트 파일 소스 전체를 본문에 삽입해서 사용 했었거든요.
이렇게 배우게 되서 감사 드립니다...^^

BlogIcon 베누시안

메뉴부분을 말씀하신 거였군요. 이미지파일이나 js파일은 경로를 수정해서 사용해야합니다. 티스토리에는 js파일을 업로드하면 이미지 폴더에만 들어가기 때문에 js링크도 수정해 줘야하죠.

BlogIcon 靑坡

베누시안님 블로그에 베울게 무궁무진 합니다
앞으로 질문 드릴게 많을것 같은데 귀찮아 하지 마시고 가르침을 주십시요.
감사합니다..^^

BlogIcon 베누시안

좋게 봐주시니 감사드립니다. 보시다가 안되시는 것 있으면 언제든지 답글 달아주세요.

비밀댓글입니다

BlogIcon 마프

질문입니다. 베누시안님 설명보고 따라했더니 잘 붙긴합니다..
그런데 위에 설명처럼 크레딧(?) 을 안달아서그런지 "no back link"가 뜹니다.
그레딧은 어떻게 넣어야 하는지도 설명 좀 부탁드려도 될까요..
감사드려요...

BlogIcon 베누시안

푸터에 다음의 코드를 적당한 곳에 추가하세요.
<div id="copyright">Menu Bar Copyright © 2012 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>

상상

유용한글 감사합니다.
하단 크레디아이콘이안보이는데 어떤건가요?
많이 배움을주시기바랍니다

BlogIcon 베누시안

크레딧은 위에 나오는 것처럼 직접 입력해줍니다.

음냐옹

한가지 여쭤볼 것이 있는데요. apycom사이트에서 메뉴를 받았습니다.(jQuery Menu Slide Style 09)
여기서 home, product info...등을 마우스 오버시에 바뀌는 색상은 이미지를 제가 만들어서 바꿨는데요.
그 아래 세부목록의 색깔을 못바꾸고 있습니다. 이 색상을 바꿀려면 css을 바꾼다고 바꿔봤는데요. 색상이 기존의 것과 겹치네요. 혹시 서브메뉴들의 색상은 어디서 바꾸면 될까요??

BlogIcon 베누시안

CSS로 직접 연구하셔야 합니다. 참고로 이 플러그인은 이미지를 사용하므로 반응형 디자인에서는 사용하기 어렵습니다.

티스토리 툴바