Erzsamatory Weblog


CSS를 통해서 메뉴를 만들면 간단하면서도 브라우저마다 호환도 잘 되기 때문에 매우 좋습니다. 현재 이 블로그도 CSS를 활용하여 만든 메뉴를 사용하고 있습니다. 이 블로그에서 사용하고 있는 메뉴는 완전한 반응형 메뉴이기 때문에 스크롤바를 내리면 알아서 크기가 줄어들고, 웹 브라우저의 해상도를 줄이면 자동으로 메뉴가 하나로 압축됩니다. 이와 같은 메뉴는 이 글에서 소개하는 CSS MenuMaker 사이트를 통해서 매우 쉽게 만들 수 있습니다.

2014년 8월 14일 현재 이 글에서 소개하는 사이트는 얼마 전부터 유료로 전환되었습니다. 따라서 메뉴 빌더를 사용하려면 비용을 지불해야 합니다. 하지만 이미 완성되어 있는 CSS 메뉴는 원본 다운로드가 가능하니, CSS를 수정할 수 있는 사용자라면 완성된 메뉴 파일을 다운로드하면 됩니다.

CSS 메뉴 자동 생성 사이트
http://cssmenumaker.com/


CSS MenuMaker 사이트 사용 방법


CSS 메뉴 자동 생성 사이트
http://cssmenumaker.com/

CSS MenuMaker 사이트를 이용하면 매우 쉽게 반응형 CSS 메뉴를 만들 수 있습니다. 이 사이트에 접속하면 아래와 같은 화면이 나타나는데, 반응형 메뉴를 만들기 위해서는 상단의 Menus - Responsive 메뉴를 선택하면 됩니다. 이 사이트에서 제공하는 메뉴는 대부분 무료로 사용할 수 있지만, 더 많은 기능을 제공하는 메뉴를 사용하고자 한다면 그에 맞는 비용을 지불해야 합니다. 또한 CSS 소스코드뿐만 아니라 웹 사이트 제작 도구인 드림위버의 플러그인을 제공하기도 하는데, 이것 또한 비용을 지불한 후에 다운로드가 가능합니다.

※ 2014년 8월 14일 현재, 이 사이트는 모든 메뉴에 대해서 유료 정책을 시행하고 있습니다. 따라서 메뉴 빌더를 통하여 메뉴를 수정한 후 다운로드하려면 일정한 비용을 지불해야 합니다. 사용자는 메뉴 빌더를 사용할 수는 있으나, 수정된 메뉴를 다운로드할 수는 없습니다. 다만, 이미 완성된 CSS 메뉴를 다운로드하는 것은 가능합니다.

홈페이지 상단의 Menus 메뉴에서 만들고자 하는 메뉴 형태를 선택합니다.

홈페이지 상단의 Menus 메뉴에서 만들고자 하는 메뉴 형태를 선택합니다.



Menus - Responsive 메뉴를 선택하면 다음과 같은 화면이 나타납니다. CSS MenuMaker 사이트에서 제공하는 반응형 메뉴는 다음과 같습니다. 총 6개의 메뉴를 지원하고 있는데요. 각 메뉴마다 표시되어 있는 우측 하단의 No Submenus, 1 Submenu, 2 Submenus는 해당 메뉴에서 지원하는 서브메뉴 단계를 의미합니다. No Submenus는 서브메뉴를 지원하지 않는다는 것을 의미하고, 1 Submenu는 1단계, 2 Submenus는 2단계까지의 서브메뉴를 지원한다는 것을 의미합니다.

이 블로그에 적용된 메뉴는 맨 마지막에 있는 메뉴입니다. 이 메뉴의 특징은 서브메뉴가 2단계까지 지원된다는 것과 상대적으로 간단한 소스코드로 쉽게 구현될 수 있다는 점이라고 할 수 있습니다. 이 메뉴가 겉으로 보기에는 소스코드가 복잡할 것 같지만 사실은 반응형 메뉴 중에서도 소스코드가 매우 간단한 편에 속합니다. 이 글에서는 이 블로그에 사용된 메뉴 즉, 맨 마지막에 있는 반응형 메뉴를 만드는 방법에 대해서 알아볼 것입니다.

CSS MenuMaker에서 기본적으로 제공하고 있는 CSS 반응형 메뉴 목록입니다.

CSS MenuMaker에서 기본적으로 제공하고 있는 CSS 반응형 메뉴 목록입니다.



위에서 본인이 만들고자하는 메뉴를 선택하면 다음과 같은 화면이 나타납니다. 여기에서 본인이 선택한 메뉴가 어떠한지 미리 확인을 한 후에, 아래쪽에 있는 Build / Download 버튼을 클릭하면 메뉴를 만드는 화면으로 이동할 수 있습니다. 빌드 / 다운로드 버튼 오른쪽에 있는 드림위버용 플러그인과 워드프레스용 플러그인은 직접 돈을 지불하고 구입해야 하는 유료 서비스입니다.

이 두 서비스를 이용하면 드림위버와 워드프레스에서 매우 쉽게 메뉴를 만들 수 있다고 합니다. CSS MenuMaker 사이트에 직접 접속할 필요 없이 드림위버 또는 워드프레스에서 직접 메뉴를 만들 수 있기 때문에 매우 편리하겠죠.

온라인 빌더를 사용하여 CSS 메뉴를 인터넷에서 직접 수정할 수 있습니다.

온라인 빌더를 사용하여 CSS 메뉴를 인터넷에서 직접 수정할 수 있습니다.



위에서 Build Online 버튼을 누르면 다음과 같이 메뉴 항목을 설정하는 화면이 나타납니다. CSS MenuMaker는 사용자의 편리성을 위하여 메뉴를 매우 쉽게 만들 수 있게 해주는 100% GUI 환경을 제공합니다. 우측 하단 스크린을 통해서 사용자는 각 메뉴 항목이 본인이 선택한 메뉴에 어떻게 적용이 되는지 실시간으로 확인할 수도 있습니다. 사용자가 직접 복잡한 소스코드를 입력할 필요 없이, CSS MenuMaker는 완전한 GUI(그래픽 사용자 인터페이스) 환경을 제공하기 때문에, 사용자는 매우 간단하면서도 쉽고 빠르게 고급스러운 메뉴를 만들 수 있습니다.

※ 얼마 전부터 CSS MenuMaker는 모든 메뉴에 대해서 온라인 빌더의 사용을 유료화하였습니다. 따라서 메뉴 빌더를 통하여 메뉴를 수정할 수는 있지만, 다운로드할 수는 없습니다. 메뉴 수정을 위해서는 직접 메뉴 스크립트 파일을 다운로드한 후, 직접 하드코딩을 해야 합니다.

완전한 GUI 환경에서 CSS 메뉴를 수정할 수 있습니다.

완전한 GUI 환경에서 CSS 메뉴를 수정할 수 있습니다.



CSS MenuMaker 온라인 빌더에서는 CSS 메뉴의 모든 요소들을 수정할 수 있습니다. 배경색, 글자 색깔, 마우스 오버 배경 색깔 등 메뉴를 디자인할 때 필요한 모든 요소들을 수정할 수 있습니다. 수정하는 방법은 매우 쉽기 때문에 초보자도 몇 번만 사용하다보면 쉽게 익숙해질 수 있을 것입니다.

여기서 잠깐! 꼭 알아야 하는 내용이 있습니다. 바로 메뉴 항목 이동 방법과 서브메뉴 생성 방법인데요. CSS MenuMaker는 완전한 GUI 환경을 제공하기 때문에 이와 같은 작업은 마우스를 통해서 매우 쉽게 해결할 수 있습니다. 아래 화면과 같이 사용자는 각 메뉴 항목을 드래그하여 그 위치를 변경할 수 있습니다. 만약 서브메뉴를 만들고 싶을땐 어떻게 해야 할까요? 메뉴 항목을 이동시킬 때와 마찬가지로 서브메뉴를 만드는 것 역시 마우스 드래그를 이용하면 됩니다.

메뉴 항목의 위치를 변경하고 싶다면, 메뉴 아이템을 위 아래로 드래그하면 됩니다.

메뉴 항목의 위치를 변경하고 싶다면, 메뉴 아이템을 위 아래로 드래그하면 됩니다.



메뉴 항목의 단계를 변경하기 위해서는 메뉴 아이템을 좌 우로 드래그 하면 됩니다.

메뉴 항목의 단계를 변경하기 위해서는 메뉴 아이템을 좌 우로 드래그 하면 됩니다.



CSS MenuMaker에서는 이렇게 매우 쉽게 자신만의 메뉴를 만들 수 있습니다. 지금까지 메뉴 항목 만들기, 메뉴 항목 위치 이동시키기, 서브메뉴 만들기에 대해서 알아보았습니다. 그럼 이제는 만들어진 메뉴를 다운로드하는 방법에 대해서 알아보도록 하겠습니다. CSS MenuMaker에서는 CSS 파일로 만들어진 메뉴를 다운로드할 수 있습니다. 메뉴 구성을 모두 완료했다면 하단에 있는 Download 버튼을 누릅니다. 그러면 압축 파일이 다운로드되는데, 이 압축 파일을 풀면 메뉴를 구성하는 각종 파일들을 확인할 수 있습니다.

※ 완성된 CSS 메뉴의 압축 파일을 다운로드하려면 이제부터는 비용을 지불해야 합니다. 다운로드 버튼을 누르면 회원가입 안내 메시지와 함께 1년에 14달러의 비용을 지불해야 한다는 경고 팝업 창이 나타날 것입니다. 그러니 무료 회원은 CSS MenuMaker에서 메뉴의 디자인만 할 수 있으며, 수정된 것을 다운로드 할 수는 없습니다. 다만, 이미 완성되어 있는 CSS 메뉴 원본 파일을 다운로드할 수 있으니, 원한다면 이 파일을 다운로드 한 후에 직접 수정을 할 수는 있습니다.

완성된 CSS 메뉴를 다운로드 하려면 아래쪽의 Download 버튼을 누릅니다.

완성된 CSS 메뉴를 다운로드 하려면 아래쪽의 Download 버튼을 누릅니다.



다운로드한 압축 파일에는 메뉴를 구성하는 각종 파일들이 포함되어 있습니다. 사용자는 이 파일들을 활용하여 사이트 또는 블로그에 본인이 직접 만든 메뉴를 적용하면 됩니다. 이것으로써 CSS MenuMaker 사이트를 사용하는 방법에 대한 설명을 마치도록 하겠습니다. 이제부터는 위에서 다운로드한 파일을 분석해보도록 하겠습니다.

만들어진 반응형 메뉴 압축 파일 분석하기


CSS MenuMaker에서 만들어진 메뉴를 다운로드한 파일은 cssmenu.zip 입니다. 이 파일은 다음과 같이 구성되어 있습니다.

cssmenu
    menu_source
        index.html
        menu_layer.js
        styles.css
    readme.html


menu_source 디렉토리에 만들어진 메뉴의 실질적인 소스코드가 포함되어 있습니다. readme.html 파일에는 만들어진 메뉴를 어떻게 실제로 적용할 것인지에 대한 방법이 소개되어 있습니다. menu_source 디렉토리의 menu_layer.js 파일은 반응형 메뉴에만 포함되어 있는 자바스크립트 파일입니다. 이 파일에는 웹 브라우저의 해상도가 줄어들었을 경우에 작동되는 모바일 전용 메뉴에 대한 정의가 포함되어 있습니다.

styles.css 파일은 해당 메뉴의 모든 스타일에 대한 정의가 포함된 파일입니다. 만약 CSS에 대한 지식이 풍부하여 직접 메뉴를 수정하고 싶을 경우에 이 파일을 본인의 입맛에 맞게 수정하면 됩니다. 최종적으로 만들어진 메뉴는 index.html 파일을 통해서 확인할 수 있습니다. 웹 브라우저에서 이 파일을 실행하면 본인이 만든 메뉴가 출력됩니다.


마무리


지금까지 CSS MenuMaker 사이트를 통해서 메뉴를 만드는 방법에 대해서 알아보았습니다. 이 사이트는 일반적인 사이트뿐만 아니라 블로그를 만들 때에도 매우 유용하게 사용될 수 있습니다.

특히 티스토리를 이용하는 많은 블로그들이 본인의 블로그에 반응형 스킨을 적용하고자 하는데, 이 때 CSS MenuMaker를 이용하면 자신만의 독특한 메뉴를 만들 수 있을 것입니다. 이 글이 블로그 업그레이드 또는 사이트 개발에 많은 도움이 되었으면 좋겠습니다.
http://www.erzsamatory.net/trackback/99
  1. Tracked from 백전백승
    2014/08/20 22:51
    이 글에서 적고자 하는 것 여기에서는 단지 멋있는 자바스크립트를 사용한 것이 아닌 CSS만으로 만든 반응형 메뉴를 봐서 이 페이지에서 적고자 한다. 반응형 메뉴보기 및 소스얻기 아래 그림을 보다시피 스마트폰에서 1번을 클릭하면 2번처럼 펼쳐지는 반응형 메뉴이다. 이 메뉴는 반응형이라 컴퓨터에서는 메뉴 항목이 가로로 펼쳐진다. 그것은 아래에서 볼 수 있다. 이것은 CSS3의 미디어쿼리 등을 사용하므로 익스플로러 8이하에서는 제대로 볼 수 없으니 익스플..

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/08/20 23:06
    유료로 전환하지 않았다면 상당히 유용했겠네요.
    • Walter E.
      Walter E.
      2014/08/20 23:33
      갑자기 유료로 전환이 되어서 정말 놀랐습니다.

      이 글을 처음 썼을 때만 하더라도 몇 개 메뉴에 대해서만 유료였는데, 이젠 전부 유료가 되었더군요.

      그래도 다운로드는 제공하니 그것으로 만족합니다... ^^
  2. 아놔
    아놔
    2016/08/05 14:36
    유료자나 샹 어디서 사기를 쳐
    다운로드만 누르면 꼐속 업그레이드 하라자나 ㅡㅡ
    • 놔아
      놔아
      2016/08/05 15:06
      2014년 댓글에 이미 유료로 전환한거 같은데요
      댓글 달러 올때 댓글도 보는 센스가 필요합니다.
    • Walter Erzsa
      Walter Erzsa
      2016/08/05 22:10
      유료 내용을 확실하게 추가하겠습니다. ㅠ.ㅠ
  3. 비밀방문자
    비밀방문자
    2016/09/11 20:31
    관리자만 볼 수 있는 댓글입니다.
  4. 2016/09/23 11:29
    사이트에 가입하고 유료결제후에 만든 css메뉴를 다운받아서 설치했습니다. 위의 홈페이지가 테스트버젼입니다. 그런데 궁금한것이 있습니다. 메뉴인 석삼자를 클릭해서 주메뉴들이 좌측에 펼쳐지고 그 메뉴들을 누르면 바로 주메뉴가 닫히면서 이동을 해야하는데 우측의 석삼자 표시를 눌러야만 주메뉴가 닫히는 불편함이 있습니다. 혹시 제가 다른 설정을 해야하나요? css메뉴사이트의 샘플들이 링크가 없어서 저처럼 작동하는지는 확인을 못하고 있습니다. ㅡㅡ,

    혹시 어떤걸 수정해야 주메뉴가 닫히면서 링크된 글들로 이동이 가능할까요?