[수정]연후하은아빠님의 CSS 메뉴를 수정했습니다. 정보
[수정]연후하은아빠님의 CSS 메뉴를 수정했습니다.첨부파일
본문
*** 2012년 2월 27일 오후 7:45 수정했습니다. 이전의 버그를 잡고 또 스크린 크기에 따라 자동적으로 스크린 갭을 맞추어 부메뉴가 등장하도록 수정했습니다. 이전에 받으신 분들은 다시 받으시기 바랍니다. ***
연후하은아빠님께 먼저 감사의 말을 드립니다. 그런데 연후하은아빠님의 스킨이 이뻐보여 쓰려고 했는데 생각과는 다르게 고정식이고 또 소스를 보니 서브메뉴가 잘못되어 나오길래 원하는 형태로 바꾸어보았습니다. jquery를 이용하여 상메뉴에 마우스를 가져가면 서브메뉴가 자동적으로 그 아래 위치하도록 보여지도록 했습니다. 또한 메뉴설정도 데이터베이스에서만 가져오는 것이 아니라 가변적으로 설정할 수 있도록 했습니다. 또한 소스를 최대한 정리해서 보기 좋게 했습니다.
압축푼 파일을 그누보드가 설치된 폴더에 푼 후 적절한 위치에서 <?php include $g4['path'].'/topmenu.skin.php';?>이런식으로 하면 됩니다.
===============
사 용 법:
===============
1. PHP 변수
===========
먼저 메뉴를 형성한다. $menus에 원하는 메뉴의 값을 넣어준다. 형식은 다음과 같다.
$menus[] = array('text'=>'menu_1', 'href=>'#', 'sub'=>array(
array('text'=>'submenu_1', 'href'=>'#'),
array('text'=>'submenu_2', 'href'=>'#'),
array('text'=>'submenu_3', 'href'=>'#')
)
);
만일 서브 메뉴가 없다면 'sub'=>null 이렇게 잡아준다.
또한 데이터베이스에서 가져오길 원한다면 text와 href를 모두 *로 값을 준다. 다음과 같이 정한다.
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);
예)
만일 맨처음을 '홈으로' 메뉴를 만들고 그 다음에 데이터 베이스를 넣어주며
맨마지막 메뉴에는 데이터베이스에서 가져오는 것이 아니라 따로 만들기 원해서 '소식란'을 만들고
그 부메뉴로 '국내뉴스', '해외뉴스'이런식으로 한다면 다음과 같이 할 수 있다.
$menus[] = array('text'=>'홈으로', 'href'=>'#', 'sub'=>null);
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);
$menus[] = array('text'=>'소식란', 'href'=>'#',
'sub'=>array(
array('text'=>'국내뉴스', 'href'=>'#'),
array('text'=>'해외뉴스', 'href'=>'#')
)
);
이렇게 하면 메뉴가 아주 유동적으로 원하는 방식으로 그리고 데이터베이스에서 가져올 수 있다.
메뉴와 부메뉴 모두 데이터베이스에서 가져오는 경우 현재의 gr_id와 bo_table에 맞추어 메뉴와 부메뉴가 select된다. 그러나 임으로 만든 메뉴들은 선택이 되지 않는다. 그래서 얻어오는 변수가 두 종류가 있다. $curr_menu_group과 $curr_menu_sub 이 두 변수의 값이 주어지면 select가 된다.
예를 들어 위의 '소식란'과 '해외뉴스'가 현재 페이지고 메뉴에서 활성화시키려면 다음처럼 변수에 값을 주어 넘기면 topmenu.skin.php에서 처리한다:
$curr_menu_group = '소식란';
$curr_menu_sub = '해외뉴스';
2. javascript 변수
==================
javascript변수에서 수정이 필요한 것은 다섯 가지가 있다.
maxUlEndPos는 서브메뉴가 우측으로 너무 넘어가지 않도록 하기 위해 값을 준다.
만일 메뉴가 많은 경우 서브메뉴가 우측으로 넘어가버릴 수 있다. 그것을 방지하기 위해 서브메뉴가 위치할 부분의 너비의 최대값이 요구된다. 여기서 사용된 메뉴바의 크기가 1000이므로 940을 주었다. 직접 확인을 하면서 최대값을 주면 될 것 같다.
minLeft는 반대로 첫번째 메뉴의 서브메뉴가 좌측으로 너무 가지 않도록 하기 위한 것이다. 현재는 0 값을 주었다. 이것도 직접해보면서 정하여 최소값을 주면 된다.
sep_icon_width은 각 메뉴 사이를 분리하는 이미지의 크기를 말한다. 혹 다른 이미지로 교체하여 크기가 달라졌을 경우 사용한다. 현재 크기는 2이다.
IEgap은 IE에서의 화면 출력이 chrome이나 다른 브라우져에 비해 차이가 난다. 그것을 보상하기 위한 값이다. 현재 14를 주었다. 이것 역시 직접해서 확인을 해보면 될 것 같다.
마지막으로 screenGap은 전체적으로 서브메뉴가 틀어질 경우 사용한다. 현재는 브라우져의 크기에 따라 실행시 자동적으로 맞추도록 되어있기 때문에 특별히 쓸 일이 없을 것같다.
연후하은아빠님께 먼저 감사의 말을 드립니다. 그런데 연후하은아빠님의 스킨이 이뻐보여 쓰려고 했는데 생각과는 다르게 고정식이고 또 소스를 보니 서브메뉴가 잘못되어 나오길래 원하는 형태로 바꾸어보았습니다. jquery를 이용하여 상메뉴에 마우스를 가져가면 서브메뉴가 자동적으로 그 아래 위치하도록 보여지도록 했습니다. 또한 메뉴설정도 데이터베이스에서만 가져오는 것이 아니라 가변적으로 설정할 수 있도록 했습니다. 또한 소스를 최대한 정리해서 보기 좋게 했습니다.
압축푼 파일을 그누보드가 설치된 폴더에 푼 후 적절한 위치에서 <?php include $g4['path'].'/topmenu.skin.php';?>이런식으로 하면 됩니다.
===============
사 용 법:
===============
1. PHP 변수
===========
먼저 메뉴를 형성한다. $menus에 원하는 메뉴의 값을 넣어준다. 형식은 다음과 같다.
$menus[] = array('text'=>'menu_1', 'href=>'#', 'sub'=>array(
array('text'=>'submenu_1', 'href'=>'#'),
array('text'=>'submenu_2', 'href'=>'#'),
array('text'=>'submenu_3', 'href'=>'#')
)
);
만일 서브 메뉴가 없다면 'sub'=>null 이렇게 잡아준다.
또한 데이터베이스에서 가져오길 원한다면 text와 href를 모두 *로 값을 준다. 다음과 같이 정한다.
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);
예)
만일 맨처음을 '홈으로' 메뉴를 만들고 그 다음에 데이터 베이스를 넣어주며
맨마지막 메뉴에는 데이터베이스에서 가져오는 것이 아니라 따로 만들기 원해서 '소식란'을 만들고
그 부메뉴로 '국내뉴스', '해외뉴스'이런식으로 한다면 다음과 같이 할 수 있다.
$menus[] = array('text'=>'홈으로', 'href'=>'#', 'sub'=>null);
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);
$menus[] = array('text'=>'소식란', 'href'=>'#',
'sub'=>array(
array('text'=>'국내뉴스', 'href'=>'#'),
array('text'=>'해외뉴스', 'href'=>'#')
)
);
이렇게 하면 메뉴가 아주 유동적으로 원하는 방식으로 그리고 데이터베이스에서 가져올 수 있다.
메뉴와 부메뉴 모두 데이터베이스에서 가져오는 경우 현재의 gr_id와 bo_table에 맞추어 메뉴와 부메뉴가 select된다. 그러나 임으로 만든 메뉴들은 선택이 되지 않는다. 그래서 얻어오는 변수가 두 종류가 있다. $curr_menu_group과 $curr_menu_sub 이 두 변수의 값이 주어지면 select가 된다.
예를 들어 위의 '소식란'과 '해외뉴스'가 현재 페이지고 메뉴에서 활성화시키려면 다음처럼 변수에 값을 주어 넘기면 topmenu.skin.php에서 처리한다:
$curr_menu_group = '소식란';
$curr_menu_sub = '해외뉴스';
2. javascript 변수
==================
javascript변수에서 수정이 필요한 것은 다섯 가지가 있다.
maxUlEndPos는 서브메뉴가 우측으로 너무 넘어가지 않도록 하기 위해 값을 준다.
만일 메뉴가 많은 경우 서브메뉴가 우측으로 넘어가버릴 수 있다. 그것을 방지하기 위해 서브메뉴가 위치할 부분의 너비의 최대값이 요구된다. 여기서 사용된 메뉴바의 크기가 1000이므로 940을 주었다. 직접 확인을 하면서 최대값을 주면 될 것 같다.
minLeft는 반대로 첫번째 메뉴의 서브메뉴가 좌측으로 너무 가지 않도록 하기 위한 것이다. 현재는 0 값을 주었다. 이것도 직접해보면서 정하여 최소값을 주면 된다.
sep_icon_width은 각 메뉴 사이를 분리하는 이미지의 크기를 말한다. 혹 다른 이미지로 교체하여 크기가 달라졌을 경우 사용한다. 현재 크기는 2이다.
IEgap은 IE에서의 화면 출력이 chrome이나 다른 브라우져에 비해 차이가 난다. 그것을 보상하기 위한 값이다. 현재 14를 주었다. 이것 역시 직접해서 확인을 해보면 될 것 같다.
마지막으로 screenGap은 전체적으로 서브메뉴가 틀어질 경우 사용한다. 현재는 브라우져의 크기에 따라 실행시 자동적으로 맞추도록 되어있기 때문에 특별히 쓸 일이 없을 것같다.
추천
11
11
댓글 전체
좋은자료 감사합니다. ^^
정말 좋은 자료네요. ^^
선춧현! 후다운!! ㄱㄱㄱ
선춧현! 후다운!! ㄱㄱㄱ
와~ 감사합니다. 너무 고생많으셨고 수고 많으셨습니다.
찾고있었는데 감사하니다 추천!
크롬이나 다른브라우져에선 잘 되는데 익스플로어에선 메뉴가 좌측으로 쏠려서 나오는데 저만 그런가요?
topmenu.skin.php 의 텍스트스타일이 익스플로어에선 적용이 안되네요 어떻게 해야하나요?
topmenu.skin.php 의 텍스트스타일이 익스플로어에선 적용이 안되네요 어떻게 해야하나요?
제가 처음 작업한 것은 익스여서 이상이 없을거라 생각이 되는데요. 혹 다른 css 와 충돌이 있는거는 아닌가요? 아니면 자바스크립트 변수를 수정해 보심도 좋을 듯하네요. 테스트 url이 있으면 확인이 가능하기도 합니다.
이거 그누보드 메뉴랑 자동으로 연동되는 건가요?
메뉴 일일이 지정하지 않아도 그룹, 게시판명을 메뉴로 자동으로 가져오지요??
메뉴 일일이 지정하지 않아도 그룹, 게시판명을 메뉴로 자동으로 가져오지요??
일일이 할수도 있고, 자동으로 할수도 있어요
배추빌더랑 궁합이 맞는가요?
다운은 안받았지만 추천합니다.
마우스 오버하면 하위메뉴 나타나는 건가요?
배추빌더와 맞는다면 사용해볼까 합니다.
다운은 안받았지만 추천합니다.
마우스 오버하면 하위메뉴 나타나는 건가요?
배추빌더와 맞는다면 사용해볼까 합니다.
배추빌더를 써보지 않아서 모르겠어요... 그리고 마우스 오버하면 하위메뉴 자동으로 나타나고 또 위치도 상 메뉴 아래쪽에 있도록 했어요.
이번에 수정된 메뉴는 좌측에 한번 나타났다가 원래의 위치로 가는 것이 아니라 처음부터 그 위치에 나타납니다. 지금 이사로 인터넷이 남의 것을 빌려서 잠깐 들어왔는데 부탁한 사이트를 보니 제가 올린 소스로 수정해서 크롬에서는 잘 보이고 익스에서는 위치가 틀어졌는데 그것은 IEgap의 값을 주어서 수정하시면 될 것 같고 또 전체적으로 차이나는 것을 위해 200을 빼는 것으로 자바스크립트 소스를 수정했던데 그게 바로 screenGap값으로 입력해야 하는 값이지 따로 200을 빼도록 소스를 수정할 필요가 없습니다. 200을 빼도록 하지 말고 screenGap값을 200으로 주면 됩니다.
지금 생각해보니까 스크린 갭이라는 것이 보는 모니터 크기에 따라 달라질 수 있겠다는 생각이 듭니다. 따라서 브라우져 크기에 따라 자동수정되도록 해야 할 것같은데 현재 청주로 이사와서 인터넷이 연결이 안되었고 또 짐정리하는 문제로 잠깐 손을 놔야합니다. 시간이 되면 버젼업해서 올리겠습니다.
감사드립니다...너무 감사드립니다.
예 그리고 스크린갭의 값에 200을 지정하였습니다.
그리고 역시 왼쪽으로 갔다가 메뉴가 제자리를 잡는 형태의 모습이
보이기도 합니다.
나중에 청주에서 자리가 제대로 잡히시면 한번 버전업해주시면 감사하겠습니다.
예 그리고 스크린갭의 값에 200을 지정하였습니다.
그리고 역시 왼쪽으로 갔다가 메뉴가 제자리를 잡는 형태의 모습이
보이기도 합니다.
나중에 청주에서 자리가 제대로 잡히시면 한번 버전업해주시면 감사하겠습니다.
수정 버젼을 올렸습니다. 다운받은 후 다시 시도해보세요.
212
찾던 자료인데 감사드립니다.
이스킨으로 3단 구조 메뉴를 구현 할수는 없는지요
이스킨으로 3단 구조 메뉴를 구현 할수는 없는지요
3단 구조 메뉴를 하려면 코딩을 새로 해야 합니다. 차라리 그것은 jquery css메뉴로 3단 이상 지원하는 메뉴가 있습니다. 그걸 바탕으로 코딩하는 것이 좋을 듯합니다.
ㄳㄳ
감사합니다.
익스9 를 사용하는데 아무리 해도 안되는군요...
크롬에선 정상출력이 되는데 말이죠
크롬에선 정상출력이 되는데 말이죠
저역시 익스 9인데 완전 깨져요 ^^; 크롬에서는 정상입니다. ㅎㅎ
저는 익스9에서 됩니다... 제 생각에는 다른 css와 충돌나서 그러지 않나 싶네요. 그냥 이것만 넣고 해보고 안깨지면 다른 것과 무엇이 충돌나는지 확인해 봄도 좋을 듯하네요. 저도 로그인 스킨 하나가 깨지게 만들어 그 스킨을 수정해야 했습니다.
아네~ css 충돌이군요.. 확인해 보겠습니다. 감사합니다. ^^
이런 것은 추천이 필수지요.
일단 추천한방~ 노력하신 수고에 비하면 수고비도 안되지만...
익스8에서 되는 분 있으신가요?
저는 완전히 깨지내요...
저는 완전히 깨지내요...
IE에서 깨지는 경우, 전체 구조를 div가 아니라 table로 짜기 때문일 수도 있습니다. 그누보드 dtd는 div로 전체 구조를 짠 경우이기 때문에 여기에 이 플러그인을 적용해보세요. 아마 문제 없이 보일겁니다.
익스9에서는 무용지물이네요..
익스9에서 안됩니다. ㅠㅠ
헛 나만 안되는게 아니였구나...ㅋ