라공

트랜스폼 메뉴 위젯

12,000원

위젯메뉴메뉴홈페이지꾸미기

코드를 어떻게 하라는 건지 모르겠다. 설치가 쉬웠으면 좋겠다.

CSS란 무엇인가. 관리자 페이지에서 만질 수 있으면 좋겠다.

가끔은 위젯 위치를 옮기거나 숨길 수 있었으면 좋겠다.

하위 메뉴를 쓰고 싶어! 디자인은 깔끔해야 해!

모바일에서도 깨끗하게 나왔으면 좋겠다.

꾸미기도 쉬웠으면 좋겠어!!!

가로 세로, 정렬, 자간 행간, 아이콘, 이미지, 폰트, 위치 조정까지
관리자 페이지에서 클릭만으로 메뉴를 끝내는 위젯

트랜스폼위젯메뉴.png

개인홈 뿐 아닌 자캐 커뮤니티까지 그대로 쓸 수 있어요.


요약

1

코드 고치기? NO

파일 업로드 후 관리자 페이지에서 활성화!

2

CSS? NO

모두가 읽을 수 있는 페이지에서 다 합니다.

3

숨기기·이동·하위메뉴? YES

관리자 페이지에서 직접 손으로!

위젯메뉴-위치.gif


최근 업데이트 (260509)NEW

  • 대문·로그인 페이지에서 자동으로 숨기기 ─ 입장 일러스트 한 장으로 꾸민 인트로 페이지 분위기를 해치지 않아요
  • 가로형일 때 로고를 메뉴 사이 중앙으로 ─ 좌측 메뉴 / 로고 / 우측 메뉴 구조를 클릭 한 번으로
  • 메인 메뉴 아이콘 가로·세로 배치 ─ 텍스트 옆에 두거나, 텍스트 위에 올릴 수 있어요
  • 텍스트 그림자·로고 그림자 ─ 글자나 로고가 배경에 묻혀도 또렷하게
  • 메인 메뉴 세로 오프셋 ─ 픽셀 단위로 위·아래 미세 조정
  • 메뉴 편집 모달이 열려있을 때는 메뉴가 눌리지 않게 정리 ─ 편집 중 실수로 페이지가 넘어가지 않아요
하위 메뉴 아이콘 메뉴 로고 중앙 정렬 페이지별 숨김 화면 위 드래그 편집 모바일 자동 대응 폰트어썸 호환

clipboard_1778324095598.png

260509 업데이트 후 ─ 가로형일 때 로고를 메뉴 사이 중앙으로 두고, 세로 오프셋까지 잡을 수 있어요.


설치법

/html/widget 폴더로 압축 푼 폴더 통째로 설치 끝!!!!!

압축을 풀면 widget_menutransform 폴더가 나와요. 이 폴더를 통째로 /html/widget/ 안에 넣으면 됩니다.

닷홈이라면 html/widget/widget_menutransform/ 안에 파일들이 들어가면 끝!

폴더명 절대 바꾸지 마세요!

widget_menutransform ─ 이 이름 그대로 두셔야 해요. 이름을 바꾸면 메뉴가 작동하지 않아요.


사용법

· 메뉴 설정

관리자 페이지 → 메뉴 관리

· 꾸미기 (색·폰트·위치 등)

관리자 페이지 → 디자인 설정


메뉴 이름

메인 메뉴

평범하게 쓰고 싶은 메뉴 이름을 씁니다.

하위 메뉴

앞에 (한글)을 붙여서 씁니다.

구분선

이름란에 구분선이라고 씁니다.


메뉴 아이콘 (폰트어썸 사용)

폰트어썸에 접속해서 무료 아이콘을 골라요. 오른쪽의 html을 클릭하면 코드가 복사됩니다.

<i class="fa-solid fa-house"></i>

위 코드 중 파란색 영역만 잘라서 메뉴 아이콘란에 넣으면 됩니다.


디자인 관리 페이지

헤더 설정 안내

사이트 기본 헤더와 충돌하지 않게, 헤더 설정은 '사용'으로 두고 헤더 높이만 '0'으로 맞춰주세요.

저장 한 번 하고, 그다음에 헤더 '사용 안함'으로 바꿔주세요.


위젯 관리 페이지

설치 경로에 잘 넣으셨다면, 환경설정 → 위젯 관리에서 위치를 'Main'으로 두고 활성화시켜 주세요.

'TOP'으로 되어있다면 한 번 비활성화 후 'Main'으로 변경.

스크린샷 2025-12-02 010013.png

여기서 '설정'을 눌러도 위젯의 모습은 보이지 않아요! (정상)

관리자 페이지 바깥, 실제 화면으로 나가서 편집합니다.

clipboard_1764762419570.png

표시된 아이콘이 메뉴 편집 버튼이에요. 누르면 그 자리에서 바로 메뉴가 편집됩니다.


커스텀 가능한 옵션

스크린샷 2026-05-09 200348.png
스크린샷 2026-05-09 200354.png
스크린샷 2026-05-09 200359.png
스크린샷 2026-05-09 200410.png

모바일

clipboard_1764762888466.png

모바일에서는 데이터 절약을 위해 이미지 대신 아이콘과 텍스트만 보여요

아이콘은 그대로 사용 가능해요. 텍스트 출력을 꺼두셨더라도 모바일에서는 모든 텍스트를 보여줍니다 ─ 작은 화면에서 메뉴를 알아보기 위함이에요.


기술 요구사항

호환
라공 에디션
PHP
8.2
MySQL
8.0
설치 방식
위젯 폴더 업로드
새 게시판
필요 없음
모바일
자동 대응

주의 사항

먼저 봐주세요

라공 에디션은 1920×1080 · PC 환경 기준으로 제작되었습니다.
브라우저 창이 좁거나 작은 화면에서는 메뉴 영역이 본문 위에 겹쳐 일부 내용이 가려질 수 있습니다. (메뉴 영역 확보가 아닙니다.)
본문을 침범하는 형태이므로, 넓은 화면에서의 사용을 권장드립니다.
*모바일 최적화는 되어있습니다!

구매 전 확인 사항

먼저 봐주세요

· 메뉴, 로고 이미지를 넣을 때 너무 큰 사이즈는 피해주세요.

· BGM 재생 관리 항목은 없어요. (메뉴 위젯 단독)

· 스킨 오류 외 스타일 커스텀 / 기능 추가 문의는 답변이 어려워요.

· 커스텀이 많이 들어간 홈페이지는 답변이 어려울 수 있어요.

## 포함 파일

ajax.php
config.php
menu_widget.php
settings_modal.php
style.css
widget.php

**총 6개 파일**

테스트 환경

php 8.2 / 라공 에디션

mysql 8.0 (닷홈의 경우 호스팅 관리 > 상세보기 > DB 정보 확인)



구매 전 확인 사항

BGM 재생 관리 항목은 없습니다.



주의사항

스킨 오류 외 스타일 커스텀 및 기능 추가에 대한 문의는 답변하지 않습니다.

외에, 커스텀이 많이 들어간 홈페이지의 경우엔 답변이 어렵습니다 ㅠㅠ

추가적인 안내가 생길 경우 갱신하겠습니다!

Q. 위젯 메뉴가 작동하지 않아요 / 404 페이지가 떠요. 

위젯 메뉴 폴더명을 widget_menuup으로 설정해 주세요. 다른 형태로 바꾸시면 안 됩니다!!!!!

궁금한 사항이 해결되지 않으셨나요? QnA 게시판에서 문의하실 수 있습니다.

완료
  • 메뉴별 커스텀 이미지 표시를 켠 뒤 파일을 업로드해도 이미지가 보이지 않거나 미리보기가 뜨지 않던 문제를 수정했습니다.
  • 업로드한 메뉴 이미지가 저장 후 실제 메뉴에 정상 반영되도록 보완했습니다.
  • 일부 메뉴명에서 설정창이 오류로 멈추던 문제를 수정했습니다.
  • 저장된 메뉴 위치 정보가 깨져 있어도 위젯이 오류 없이 표시되도록 안정성을 보완했습니다.
완료
  • 아이콘, 텍스트 숨김 항목을 드롭다운(택1) -> 체크박스(다중 가능)로 변경
완료
  • 대문, 로그인 페이지에서 메뉴 자동 숨김
  • 메인 메뉴 ─ 아이콘 배치 옵션 (가로 / 세로)
  • 메인 메뉴 ─ 텍스트 그림자 옵션
  • 메인 메뉴 ─ 세로 오프셋 추가
  • 로고 ─ 가로형일 때 메뉴 사이 중앙으로 정렬하는 옵션
  • 로고 ─ 그림자(드롭 섀도우) 옵션
  • 메뉴 편집 모달이 열려있을 때 메뉴가 눌리지 않도록 수정
완료
  • 위치 방식이 '기본'일 때 메뉴가 눌리지 않는 현상
  • 관리자 위젯 관리 페이지에서 메뉴 위치 방식을 수정하였을 때, '설정이 저장되었습니다' 창이 여러 번 출력 되는 현상
  • 위치 방식이 '상대'일 때, 가로 위치는 수정하면 메뉴가 이동하나 세로 위치는 수정해도 메뉴가 움직이지 않고 상단에 고정되어 있는 현상
  • 구분선 설정 후 저장하면 구분선이 2개씩 보이는 문제
  • hover 시 설정 한 색상이 적용되지 않는 문제
완료
  • 게시판 혹은 게시글 공유 링크로 접속시 메뉴가 뜨지 않는 현상
  • 메뉴 및 하위 메뉴의 폰트 설정이 리셋되는 문제
완료
  • 세로정렬 메뉴를 우측에 붙였을 때 하위메뉴가 우측에 떠서 보이지 않는 문제
  • 관리자 페이지 > 메뉴 관리 > 메뉴 수정 시 위젯 메뉴의 메뉴별 이미지 매핑이 초기화 되는 문제
완료
  • 특정 페이지에서 메뉴가 숨겨질 수 있도록 변경
  • 출력을 TOP > Main으로 변경
  • 텍스트가 없을 때에는 이미지에 여백 적용하지 않음 > 아이콘도 적용되지 않던 문제 수정 (1205_15:54)
  • 로그인/로그아웃, 메뉴 편집, 관리자용 버튼은 아이콘 표시 여부와 관계 없이 항상 아이콘 표시
  • 메뉴에 마우스 오버 시 위로 살짝 들리는 효과 추가
  • 관리자 > 메뉴 추가/수정 시 이미지 설정이 초기화 되는 문제
  • 사용하지 않는 이미지 삭제에 사용 중인 로고, 메뉴 배경이 포함되는 문제
  • 메인 스킨에서 iframe으로 출력한 게시판 내부에 메뉴(모바일이 아니더라도)가 생기지 않도록 수정 (1205_16:07)
완료
  • 하위 메뉴 클릭 시 모든 메뉴의 하위 메뉴가 접히도록 수정
  • '드래그로 위치 조정 가능' 체크 해제 시 드래그 핸들이 뜨지 않도록 수정
  • 로고 클릭 시 노래 끊기던 문제 수정
완료
  • 추가 버튼(로그인, 관리자)의 아이콘 크기가 폰트 크기를 따라가도록 변경
  • 관리자인 경우, 관리 페이지가 아니더라도 위젯 드래그 이동이 가능하도록 변경
  • 모든 색상 필드에 투명도 슬라이더 추가
  • 위젯 설정
    • 관리자 페이지 > 위젯 관리의 설정을 사용하지 않도록 변경
      • 사용할 수는 있으나 실시간 미리보기 출력이 안 됩니다!
    • 위젯 편집 버튼을 별도로 생성하여 관리자 페이지가 아니어도 편집할 수 있도록 수정
  • 모바일 호환
    • 이미지 출력은 사용하지 않음
      • 로드 시 데이터 소모, 이미지 자체의 최적화가 되어있지 않을 수도 있음 등을 고려.
    • 아이콘 출력은 사용 가능
    • 텍스트 출력을 사용하지 않더라도, 모바일 환경에서는 모든 텍스트를 출력.
×