웹마스터 팁

음..
명칭이 생각 안나서 메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 이라고 했습니다..

생각 해보면 아주 간단합니다
각자의 레이아웃을 열어서.. (혹시 모를 오류를 대비하세요.. =ㅁ=;)

//레이아웃의 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 에서 수정해야 할부분...

<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>   

<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

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'");
}


CSS 추가해야 할 부분

위치 : layout/해당레이아웃/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}




 

태그 연관 글
  1. [2017/01/12] 묻고답하기 admin 페이지 메뉴 오류 by 쿠닌 *2
  2. [2016/10/13] 묻고답하기 어드민 페이지 메뉴 by 쿠닌 *2
  3. [2015/11/02] 웹마스터 팁 이제는 유튜브동영상 손쉽게 다운로드 받으세요 ミ:つÞ by 딴죽을거는남자 *7
  4. [2015/01/12] 묻고답하기 사이트 메뉴 편집에서 메뉴 이름 수정이 되지 않습니다. by 구큰타 *7
  5. [2014/06/06] 묻고답하기 메뉴를 추가했으나.. 메인페이지에서 안보이네요..ㅠㅠ by 야옹잉 *2
제목 글쓴이 날짜
확장변수 한줄입력칸 폭 조정하기 [2] 아고라 2009.09.30
팁이라고까지 할껀 없지만.....(db날렸을때..카페24사용시) [3] 왜만지냐 2009.01.06
스팸필터 단어 목록 (성인,불륜,화상채팅,만남 등등) [2] 때린데 또때려 2010.11.08
큰 파일의 썸네일이 안생기는 경우 해결방법(수정) [12] file 얼터 2008.03.15
''게시판 설명''에서 <br />에 margin이 먹는 버그 해결법 [1] 지녁 2010.11.03
메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 [25] 소마세월 2007.11.07
검색조건, 제목+내용 을기본으로 설정하기 [7] 대암지기 2008.01.28
모듈 선택기 추가 안되는 에러 해결 : 모둘의 브라우저 제목에서 따옴표 '' 뺏더니 해결 [4] file refree 2010.04.27
IE6~8에서 CSS3속성 사용하기 [1] SeoSeungHyun 2010.10.01
7일지난 게시물에 덧글달면 포인트 지급 안하기 [2] 비비디 바비디 부 2010.08.12
외부페이지 또는 파일링크시 글자깨짐 현상 [1] file 소백산 2009.01.31
페이지 모듈에서 파일 업로드시 살아지는 현상 [1] 조슈아킴 2010.11.02
까오천사님의 만기일 팁을 1.2.4에 맞게 수정했어요. [15] file 도파 2009.08.27
메뉴목록이 너무 많아 메뉴를 가로 전역에 걸쳐 넣고 싶으십니까? 또는... [3] 유샤인 2010.03.04
문서 서식에 관한 정보 [4] YO-DA 2010.08.06
최근글 - 본문 내용 뽑아내기 [9] 夜飛 2008.05.01
스크립트 오류로 고생하시는분 [2] 니오티 2010.06.21
랭킹에 순위 넣기! ㅋ~ (꼼수;) file 다케루 2007.09.11
php폼메일 관련 한번 올려봅니다. 사용하실분들은 수정하셔서 사용해보세요.. [10] file 코리아프럼 2008.06.26
레이아웃 관리자 페이지 html 에디터창 늘리기+줄이기 [1] file 레드폭스 2010.08.25