웹마스터 팁

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

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

//레이아웃의 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
제목 글쓴이 날짜
SVN 의 사용 방법 [3] preware 2007.11.06
완전 초보도 확장 변수를 이용해 게시판 개조할수잇다!! [4] 쿤. 2007.11.06
(08년 1월2일수정)0.2.3이후 최근글에 공지사항을 제외시키고자할 경우 [11] 포레버 2007.11.07
레벨 아이콘이 제대로(찌그러지는 등) 출력되지 않을 때 수정방법 必得力 2007.11.07
메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 [25] 소마세월 2007.11.07
"이 게시물을..." 추천/비추천/신고 메뉴를 버튼으로 [28] file xe촙5 2007.11.08
제로보드 2.3 에서 2.5 변경사항 데이터 테이블 구조 변경사항 체크를 정리해봅니다. [4] 도토리나무 2007.11.09
제로보드 2.3 에서 2.5 업그레이드 방법 도토리나무 2007.11.09
첨부파일 기능에 대한 짧은 정보 [3] 고라리 2007.11.09
외부 문서에서 회원 정보 얻는 방법 [11] 소마세월 2007.11.10
통합검색 버그 style 수정 [2] 소마세월 2007.11.11
확장변수에서 본문 입력 빼기 [10] file Diver 2007.11.12
회원에게 만기일 주기(1원짜리 팁) [17] 까오천사 2007.11.12
쪽지 수신 음성 알림 [19] file Simulz 2007.11.13
알바트로스 적용후 검색하는 곳에 댓글과 태그 검색 업션 넣기 [1] 비밀얌 2007.11.13
[수정]업로드된 그림 자동출력 [6] 소마세월 2007.11.13
이미지 갤러리 셀렉트박스 문제 [1] 공작대천사 2007.11.14
<head> 태그안에 임의의 내용을 넣는 방법 [1] 발돋움 2007.11.16
간편해진 페이지 수정법 file coll 2007.11.16
(포인트) 레벨별 포인트 계산 기능 추가 [4] file Simulz 2007.11.19