웹마스터 팁
2차메뉴 롤오버 위치 변환..
2008.06.05 14:40
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 값을 또 수정해 주어야 하는데요..ㅡㅜ
뭔가 자동적으로 해줄 수 있는게 있을 것 같은데.. 거기까진 모르겠네요ㅠ
고수님들 부탁드립니다.ㅋ
댓글 3
제목 | 글쓴이 | 날짜 |
---|---|---|
손님이 비밀글 작성한 직후에도 글 보려면 반드시 비밀번호 넣게 하는 방법 [1] | sejin7940 | 2014.06.18 |
목록에서 이미지 팝업 이용하기 | Happyphp | 2014.06.19 |
관리자페이지에서 콘텐츠->파일 에서 등록된 파일 전체 리스트에 이미지가 바로 나타나도록 [2] | sejin7940 | 2014.06.19 |
상단에 스르르~ 닫기 가능한 배너 달기
[30]
![]() | 야옹잉 | 2014.06.20 |
XE에서 신디케이션 제거하기 [1] | mAKEkr | 2014.06.20 |
관리자가 글 쓸때는 분류를 선택 안 해도 등록되도록 (공지글을 쓸때를 위해) 개선 [2] | sejin7940 | 2014.06.21 |
min.js min.css 정리해서 보기 | Happyphp | 2014.06.26 |
php에서 한글언어 작성이 깨질때 [1] | 광개토대왕3 | 2014.06.28 |
BlogAPI 활용하기
![]() | 맞장 | 2014.06.29 |
닉네임 중복체크 버그 해결방법 [7] | 소렌트. | 2014.06.29 |
[nginx] Rewrite 예외 설정 | okiz | 2014.06.30 |
외국어 스팸 방어 [2] | DoorWeb | 2014.07.01 |
[javascript] 기초강좌 | 03 논리연산자, 비트, 삼항연산자, 기타연산자 | hiwebs | 2014.07.02 |
[javascript] 기초강좌 | 4장. 비교제어문(if문) | hiwebs | 2014.07.02 |
jqm(jQuery Mobile) 사용 시 XE의 CSS 와 충돌할 때
![]() | Canto | 2014.07.03 |
에디터 컴포넌트에 현재 mid 값 넘겨주기. [1] | 애니즌 | 2014.07.03 |
XE Core:1.7.5.3 조회수 증가, 자기 게시글 클릭시 조회수 증가
[1]
![]() | 때린데 또때려 | 2014.07.04 |
클리어픽스(clearfix)의 개념과 방법 | 시니시즘 | 2014.07.04 |
php 세션을 memcache에 저장할 때 주의할 점 | XE러버 | 2014.07.04 |
xe 1.7.4 이상 object cache 및 template cache 적용 방법 [3] | XE러버 | 2014.07.04 |