웹마스터 팁

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

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

//레이아웃의 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
제목 글쓴이 날짜
member 모듈 메일인증을 사용할때 모바일 기본스킨에서 회원가입 후 이메일 발송 안내 띄우기 [2] file 후하니 2015.08.01
새로고침 없는 실시간 웹서비스를 위한 기술과 간략한 역사(?) [1] onTrust 2015.07.27
[실험팁] XE 고용량/큰사진 썸네일 깨지는 것 해결 socialskyo 2015.07.20
레이아웃 메뉴에서 메뉴옆에 글수 표시하기 반걸 2015.07.20
DB에서 직접 시퀀스 생성하기 [3] 기진곰 2015.07.18
CloudFlare 사용시 방문자 IP와 SSL 접속여부가 정확하게 파악되지 않는 문제 해결법 [4] 기진곰 2015.07.12
IIS서버 자동 설치 프로그램(PHP, MySQL, phpMyAdmin) [1] 공처아찌 2015.07.12
모바일에 최적화된 화면으로 보기 문구가 레이아웃을 가리는 문제 creative8 2015.07.11
config 파일을 일반 유저가 쓸 수 없는 문제 해결법 [15] wkp 2015.07.09
문서페이지가 수정이 되지 않는 문제 [2] file monet 2015.07.07
위젯 가운데 정렬 하는법 [3] 불금 2015.07.05
홈페이지 제작 시 점검사항 15가지 [1] 유래유거 2015.06.29
사이트 서버 운영체제와 사용하는 웹서버 소프트웨어 알아보는 사이트 file 후하니 2015.06.28
홈페이지 속도가 느린 이유.(팁같지도 않은 팁) [11] 가브리엘조 2015.06.27
cloudflare api 용 curl 기본값 마루디자인 2015.06.24
추천검색어,실시간인기순위 소스 file codlllle 2015.06.21
실시간 rss 피드글 출력 위젯 file codlllle 2015.06.20
다음 위젯 뱅크를 대신할 위젯 베스트! codlllle 2015.06.20
자신이 쓴 글에 특정유저 댓글을 차단 Ikoo 2015.06.20
다음 실시간 검색어 위젯 file codlllle 2015.06.19