웹마스터 팁

http://www.zeroboard.com/15977640

위 주소에 있는 소마세월님 소스에서 약간만 수정하였습니다.

소마세월님 소스에서는 서브레이어가 고정으로 되어 있어서 2차 메뉴들이 계속 같은 자리에서만 나오더라구요.ㅠ

메뉴크기가 제각각일경우 유동적으로 나오도록 하였습니다.

우선 layout 수정부분에서 히든 레이어 부분만 수정하였습니다.

<!--히든 레이어 메뉴-->
<!-- 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-->"
<!--@if($val['text']=='메인메뉴1')-->
<div class="subMenu1">
<
!--@elseif($val['text']=='메인메뉴2')-->
<div class="subMenu2">
<!--@elseif($val['text']=='메인메뉴3')-->
<div class="subMenu3">
<
!--@elseif($val['text']=='메인메뉴4')-->
<div class="subMenu4">
<
!--@elseif($val['text']=='메인메뉴5')-->
<div class="subMenu5">
<
!--@elseif($val['text']=='메인메뉴6')-->
<div class="subMenu6">
<
!--@elseif($val['text']=='메인메뉴7')-->
<div class="subMenu7">
<
!--@elseif($val['text']=='+ '+ '메인메뉴8')-->
<div class="subMenu8">
<
!--@else-->
<div class="subMenu1">
<
!--@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></div>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
<!--히든 레이어 메뉴 끝-->

위의 빨간색 부분으로 조건을 주어서 css에 메뉴별로 위치를 주었습니다.

여기서 주의할 건 배경을 통채로 위치를 지정해주게 되면 옆으로 계속 밀려난다는 겁니다.;;

그래서 위의 초록색 부분처럼 배경은 레이어를 따로 만들어 주고, 텍스트 부분만 padding으로 밀어주었습니다.

그럼 이제 css부분!!

.subMenu{position:absolute; left:218px; top:57px; background-color:#d2e3f1;width:730px;height:24px;}

.subMenu1{padding-left:10px;}
.subMenu2{padding-left:100px;}
.subMenu3{padding-left:195px;}
.subMenu4{padding-left:325px;}
.subMenu5{padding-left:415px;}
.subMenu6{padding-left:475px;}
.subMenu7{padding-left:575px;}
.subMenu8{padding-left:600px;}

subMenu 클래스는 배경 레이어이기 때문에 하나로 고정이구요..

아래의 subMenu1,2,3,4,5,6,7,8은 padding-left를 이용하여 텍스트의 위치를 유동적으로 주었습니다.

이 단점이 메뉴가 어느정도 적당할때는 그냥 사용이 가능하지만

서브 메뉴가 많아질 경우에는 padding 값을 또 수정해 주어야 하는데요..ㅡㅜ

뭔가 자동적으로 해줄 수 있는게 있을 것 같은데.. 거기까진 모르겠네요ㅠ

고수님들 부탁드립니다.ㅋ

제목 글쓴이 날짜
확장변수, 회원가입 등의 한국 우편번호 검색 서버 주소 변경... [2] Double'U' 2013.12.26
레이아웃 css 쉽게 수정하는 방법 (개발자모드 이용) [1] file 멀티비타민 2013.12.29
에디터로 글 작성시 폰트 크기가 12px로 변경되는 현상 해결방법 [7] file jambox 2013.12.31
[애매모호]스케치북 게시판을 뭔가 큼직큼직하게 눈에 잘들어오게 바꾸기 [10] socialskyo 2014.01.03
이미지프로세스 ver.1.2.3.0에서 원본 다운로드가 안될 때 대암지기 2014.01.03
[10원팁] 크롬에서 글 작성시 IFRAME 박스가 생기는 경우 socialskyo 2014.01.03
[10원팁] GROUP SRL / MODULE SRL을 알아야 하는 경우 [2] socialskyo 2014.01.03
나만의 익명게시판에서 닉네임 확인하는 방법(꼼수라고 밝힙니다.) [5] 착한부산남자 2014.01.03
스케치북5 게시판 스킨 사용시 모바일 코멘트 수정이 전혀 안되는증상 [24] AJKJ 2014.01.05
[스케치북5] 댓글 수정 간략화하기.. (새로고침 없이 하는 방법 추가) [16] file XE만세 2014.01.05
스케치북 게시판 제목 과 분류 사이의 공간 제거 하기 [6] file socialskyo 2014.01.06
아이템샵 모듈에서도 『닉네임 변경시 모든 게시글,댓글 닉네임 수정 애드온』 작동하도록 수정. [3] file jambox 2014.01.06
스케치북 게시판 사용시 "내용을 입력해주세요"라고 뜨면서 댓글 입력이 안될경우 체크해봐야할 사항 [1] socialskyo 2014.01.07
댓글 익명 문자열에 색상 부여하기 [6] XE만세 2014.01.07
홈페이지 접속자, 글(댓글) 작성자 국가 국기 표시 적용 방법 [19] file 라싸 2014.01.08
파란/네이버/네이트온 메신저 이모티콘 다운로드 [1] socialskyo 2014.01.08
[10원팁] 스케치북 서명란 크기 [5] socialskyo 2014.01.08
알림센터의 익명명칭을 anonoymous에서 다른 형태로 바꾸기 [1] jambox 2014.01.08
APMSETUP7에서 PHP 버전 업그레이드 [1] YJSoft 2014.01.14
IE의 깨짐현상(호환성보기 문제) [1] Volun 2014.01.14