웹마스터 팁
메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법
2007.11.07 15:00
음..
명칭이 생각 안나서 메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 이라고 했습니다..
생각 해보면 아주 간단합니다
각자의 레이아웃을 열어서.. (혹시 모를 오류를 대비하세요.. =ㅁ=;)
//레이아웃의 1차메뉴 출력
//다른것과 다른게.. $idx 카운트를 하죠.. 음.. 1차메뉴 갯수를 바로 뽑을수 있다면 필요 없겠죠.. 아직 모르니....
<ul id="gnb">
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li onMouseOver="menu({$idx});" <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href'+ '+ ']}" <!--@if($val['open_window'+ ']=='+ 'Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
//이 스크립트는 1차메뉴의 갯수를 지정하는 곳입니다.
<script language="javascript1.2">
var menuLen={$idx-1};
</script>
// 메뉴별로 2차 메뉴를 뽑아 내야 합니다.
// 위의 1차 메뉴에서는 만들기가 어려워서 한번 더 돌려야 합니다.
// 1차메뉴 출력부분을 빼고 2차 메뉴만 출력 하면 되지요..ㅎ.ㅎ
<!--히든 레이어 메뉴-->
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--2차메뉴-->
<div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->">
<!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
<!--@if($val1['selected'])--><!--@end-->
<a id="lnb1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text']}</a>
<!--@end-->
<!--@end-->
</div>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
//스크립트 부분
function menu(idx){
for (i=1;i<=menuLen;i++){
eval("document.getElementById('+
'subMenu_"+i+"'+
').style.display='none'");
}
eval("document.getElementById('subMenu_"+ idx +"').style.display='block'");
}
script에 요고 추가 하시면 위의 코드로도 충분히 돌아갑니다...
음..... 위치 지정은 css에서 하시면 되구요
행운이 있기를!
쉽죠? (밥 로스가 아냐!!)
어디에 적용 되어 있냐구요??
여기쏘스에요
질문 하시는 분이 계셔서 추가.....
CSS에 추가 해야 할것이 뭣이냐 하면..
.subMenu{position:absolute; left:210px; top:120px; background-color:#FFFFFF;width:750px;height:24px;}
#lnb1{text-decoration:none;color:#000000;padding-left:10px; line-height:2em; position:relative;white-space:nowrap; }
#lnb1:hover,focus {color:#000000}
이 내용 입니다..
서브 메뉴의 위치를 설정 해 주셔야 이쁘게 되겠죠..
빨간색으로 된 부분 수정 하셔서 위치 지정 해 주시면 되요..
정리해서 올립니다.
layout.html 에서 수정해야 할부분...
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li onMouseOver="menu({$idx});" <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<script language="javascript1.2">
var menuLen={$idx-1};
</script>
<!--히든 레이어 메뉴-->
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--2차메뉴-->
<div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->">
<!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
<!--@if($val1['selected'])--><!--@end-->
<a id="lnb1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text']}</a>
<!--@end-->
<!--@end-->
</div>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
script 부분 추가 해야 할 부분
위치 : layouts/해당레이아웃/js/?????.js
for (i=1;i<=menuLen;i++){
eval("document.getElementById('subMenu_"+i+"').style.display='none'");
}
eval("document.getElementById('subMenu_"+ idx +"').style.display='block'");
}
CSS 추가해야 할 부분
위치 : layout/해당레이아웃/css/?????.css
#lnb1{text-decoration:none;color:#000000;padding-left:10px; line-height:2em; position:relative;white-space:nowrap; }
#lnb1:hover,focus {color:#000000}
- [2017/01/12] 묻고답하기 admin 페이지 메뉴 오류 *2
- [2016/10/13] 묻고답하기 어드민 페이지 메뉴 *2
- [2015/11/02] 웹마스터 팁 이제는 유튜브동영상 손쉽게 다운로드 받으세요 ミ:つÞ *7
- [2015/01/12] 묻고답하기 사이트 메뉴 편집에서 메뉴 이름 수정이 되지 않습니다. *7
- [2014/06/06] 묻고답하기 메뉴를 추가했으나.. 메인페이지에서 안보이네요..ㅠㅠ *2
댓글 25
-
아방스
2007.11.07 16:20
-
주하니
2007.11.07 16:39
좋은 팁입니다. 저도 함 시도해 봐야 겠네요.^^
-
guny
2007.11.08 11:15
추천..... -
경천애인
2007.11.08 11:30
소마세월님의 좋은 팁 감사드립니다^^
그런데
위치 지정을 css에서 하시면 된다고 하셨는데
무엇의 위치 지정을 말하는 것인지요^^
->
소마세월님의
빠른 답변 진심으로 감사드립니다^^ -
이상헌918
2007.11.08 17:41
script와 css는 어느 파일에서 고쳐야 하나요? -
소마세월
2007.11.08 17:45
해당 레이아웃 폴더를 살펴 보시면
css 폴더와 js 폴더가 있습니다.
그 속 에 파일이 들어 있지요.. 거기 추가하세요 -
이상헌918
2007.11.08 21:41
한가지만 더 물어볼께요.. 서브메뉴가 메인 메뉴에 나오는데 따로 submenu를 만들어줘야 하나요?
http://hinet.hserv.info/zbxe 다음과 같이 메뉴속에 나오거든요. -
소마세월
2007.11.10 16:05
상헌님 소스 살펴보니..
css에
submenu로 되어 있군요..
.submenu 해보세요
점 이 들어가야 합니다. -
최현훈
2007.11.09 00:42
아직 잘 적요을 못시키겠어요 ㅠㅠ 스크립트 추가도 그렇고 ㅠㅠ 초짜라서 자세한 설명좀~
-
도토리나무
2007.11.10 15:05
감사합니다.
^^ -
알라뷰
2007.11.11 06:04
layout.html 는 넣어야 하는 위치는 쉽게 찾을 수 있는데...
script와 css 파일에 어느 위치쯤 넣어야 하나요. 가장 아랫 부분에 넣으니 안되네요.
초보들은 항상 이렇게 버벅 거립니다. ^^* -
알라뷰
2007.11.12 12:05
http://cd1318.co.kr 수정은 다한 것 같은데... 아직 적용이 안되고 있습니다. 도와주세요 ^^*
-
이상헌918
2007.11.12 13:28
submenu로 하면 서브메뉴가 나타나는데 .submenu를 하면 메뉴가 안 나타나네요.... 윗 님하고 똑같은거 같은데...
-
소마세월
2007.11.12 17:47
음.... 기본레이아웃에서 테스트를 해보고 다시 올리도록 하겠습니다...
제 레이아웃에서만 테스트 한거라.. 뭔가 설정이 틀릴지도 모르겠군요.. -
애니컴
2007.12.29 19:08
;;;에고 css 와 script 추가법을 잘 모르겟네요
거기서 부터 어렵네요 ^^; -
터
2008.01.02 10:46
무척 찾아 헤메던 팁입니다.
감사합니다.
참 하위메뉴의 가로 정열을 중앙으로 할 수 있는 방법은 없을까요?
눈치로 때려잡아 "float::center" 이렇게 했더니 안되네요....
에니컴님 나도 초본데요
css와 script도 html과 똑 같은 방법으로 수정하면 되구요 css파일 삽입하는 내용중에 빨간색으로 된 부분으로 하위메뉴 위치를 잡아 주면 됩니다.
삽입하는 위치는 크게 상관 없는 듯 합니다. 그냥 맨 밑에 추가하셔도 됩니다. -
팔공산
2008.01.29 13:32
이 소스 잘 사용하고 있습니다. 감사합니다.
이 소스를 작용하니 1차메뉴에 관리자히든메뉴가 있으면 로그아웃에서는 2차메뉴가 열리지를 않습니다.
히든메뉴를 오픈으로 바꾸면 열리고요,
소스 어디를 손보면 히든메뉴가 있어도 정상적으로 2차메뉴가 열릴까요. -
sound4u
2008.03.26 08:41
훌륭합니다. 추천 꾸~욱! -
달동네
2008.04.22 18:06
관리자 아이디로 들어가서 해보면 정상 작동 되는데 로그아웃하거나 다른 아이디로 접속하면 되질 않네요....
참....왜그런지 도저히 모르겠네요... ㅠㅠ -
초보
2008.07.24 01:07
꼭필요한 팁이며 유용하게 활용했습니다.
감사합니다. -
두들리
2008.07.31 02:31
^^; 고맙습니다. 어찌어찌 적용하다보니 저한테 드뎌 맞는 모양을 갖추게 되었네요.. 감사~ -
나만타르
2008.08.01 15:02
유용한 정보...감사히 잘 쓰고 있습니다.
그런데....2차메뉴에서 롤아웃했을 때 사라지게 하고 싶은데....가능한가요? -
산토
2009.09.22 15:52
와 고맙습니다~!+_+ -
진짜초보
2010.03.28 16:57
전 왜이리 안쉽죠?
하라는데로 다 한거같은데 이상한 위치에 메뉴가 추가로 나타납니다.
layout.html은 정확하게 어느부분을 수정해야하는 건가요?
(대략 78열 근처인것 같은데..
<ul class="gnb">
{@$_idx = 0}
<!--@foreach($main_menu->list as $key => $val)--> 요부분...머리에 쥐가 나는것 같습니다.
누구좀 도와주실 분 안계신가요?
-
나그네
2010.11.08 10:28
감사합니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
확장변수 한줄입력칸 폭 조정하기 [2] | 아고라 | 2009.09.30 |
팁이라고까지 할껀 없지만.....(db날렸을때..카페24사용시) [3] | 왜만지냐 | 2009.01.06 |
스팸필터 단어 목록 (성인,불륜,화상채팅,만남 등등) [2] | 때린데 또때려 | 2010.11.08 |
큰 파일의 썸네일이 안생기는 경우 해결방법(수정) [12] | 얼터 | 2008.03.15 |
''게시판 설명''에서 <br />에 margin이 먹는 버그 해결법 [1] | 지녁 | 2010.11.03 |
메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 [25] | 소마세월 | 2007.11.07 |
검색조건, 제목+내용 을기본으로 설정하기 [7] | 대암지기 | 2008.01.28 |
모듈 선택기 추가 안되는 에러 해결 : 모둘의 브라우저 제목에서 따옴표 '' 뺏더니 해결 [4] | refree | 2010.04.27 |
IE6~8에서 CSS3속성 사용하기 [1] | SeoSeungHyun | 2010.10.01 |
7일지난 게시물에 덧글달면 포인트 지급 안하기 [2] | 비비디 바비디 부 | 2010.08.12 |
외부페이지 또는 파일링크시 글자깨짐 현상 [1] | 소백산 | 2009.01.31 |
페이지 모듈에서 파일 업로드시 살아지는 현상 [1] | 조슈아킴 | 2010.11.02 |
까오천사님의 만기일 팁을 1.2.4에 맞게 수정했어요. [15] | 도파 | 2009.08.27 |
메뉴목록이 너무 많아 메뉴를 가로 전역에 걸쳐 넣고 싶으십니까? 또는... [3] | 유샤인 | 2010.03.04 |
문서 서식에 관한 정보 [4] | YO-DA | 2010.08.06 |
최근글 - 본문 내용 뽑아내기 [9] | 夜飛 | 2008.05.01 |
스크립트 오류로 고생하시는분 [2] | 니오티 | 2010.06.21 |
랭킹에 순위 넣기! ㅋ~ (꼼수;) | 다케루 | 2007.09.11 |
php폼메일 관련 한번 올려봅니다. 사용하실분들은 수정하셔서 사용해보세요.. [10] | 코리아프럼 | 2008.06.26 |
레이아웃 관리자 페이지 html 에디터창 늘리기+줄이기 [1] | 레드폭스 | 2010.08.25 |
쉽죠? ㅠ.ㅠ