웹마스터 팁
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
-
초보
2008.07.24 01:10
-
아마겟돈
2008.09.15 02:06
배경지정부분에
<div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;!--@else-->display:none;<!--@end-->" >
위 꺽쇄 (붉은색) 빠졌습니다. -
카인군
2008.12.27 21:15
음 감사합니다 덕분에 해결했네요. 제가 css를 쓸줄몰라서 억지로 한 걸로 부연설명을 드리자면 소마세월님 소스 그대로 쓰시고 <!--2차메뉴--> 아래줄에 <div class="subMenu" 이부분 에서 class="subMenu" 지우시고 빨간색 부분 긁어서 붙여넣으신다음에 거기서 class 지정해주세요. 이런식으로 ; 좀 지저분해도 참아주세요 ㅠ.ㅠ<!--2차메뉴--><div<!--@if($val['text']=='홈')-->class="subMenu1"<!--@elseif($val['text']=='학과소개')-->class="subMenu2"<!--@elseif($val['text']=='교수님소개')-->class="subMenu3"<!--@elseif($val['text']=='게시판')-->class="subMenu4"<!--@elseif($val['text']=='학년별게시판')-->class="subMenu5"<!--@elseif($val['text']=='학생회')-->class="subMenu6"<!--@elseif($val['text']=='차후추가')-->class="subMenu7"<!--@else-->class="subMenu"<!--@end-->id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->">저기서 빨간색 글씨로 메인메뉴1 이라는건 메인메뉴 이름을 적어주시면 됩니다. 첫번째 메인메뉴 이름이 홈이라면 <!--@if($val['text']=='홈')--> 이렇게 적으시면 됩니다.css 부분에는 subMenu 1,2,3,4, 이것들 전부다 subMenu 에 있던 내용들 다 채워 넣으셔서 하시면 됩니다 ; 무식하면 용감하다고 제가 그꼴이네요 하하; 위치랑 패딩, 레이어 크기 같은건 수정하셔서 쓰시면 됩니다..subMenu{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;}.subMenu1{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:10px; }.subMenu2{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:50px;}.subMenu3{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:120px;}.subMenu4{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:200px;}.subMenu5{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:280px;}.subMenu6{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:400px;}.subMenu7{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:440px;}.subMenu8{position:absolute; left:50px; top:53px; background-color:transparent;width:530px;height:24px;padding-left:510px;}전 무식하게 이렇게 해결했습니다; 고수님들 보시면 좀 깔끔하게 부연설명 해주세요~
제목 | 글쓴이 | 날짜 |
---|---|---|
도메인이 바뀐후 기본 URL을 바꿨지만 2차메뉴의 링크는 바뀌지 않은 경우. [9] | Ryuj | 2013.11.20 |
[왕초보팁] 2차 메뉴를 레이아웃 스킨에 넣을 때 [2] | HolyJohn | 2011.01.21 |
아파치 httpd.conf 2차 설정본 - php 연동 | 이성헌 | 2005.12.15 |
2차도메인을 이용한 내컴퓨터 자료실로 이용하기 [3] | 무꾸 | 2003.06.27 |
2차메뉴 롤오버 위치 변환.. [3] | 봄처녀 | 2008.06.05 |
2차 메뉴가 없을 경우 왼쪽 메뉴 숨기기 [5] | 엔시아- | 2009.07.16 |
확장변수 이용해서 2차 3차 분류 항목 만들기 [3] | VagaBond | 2007.09.08 |
2차,3차 메뉴가 좌측으로 일렬로 되어있어 구분이 잘 안됩니다,이럴 때~ [7] | *제트* | 2007.09.16 |
잡다한 2차 사용하시는분들 중에 페이지 수정버튼이 클릭안될때.. [6] | 수아기 | 2008.02.22 |
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] | 우야노 | 2008.05.03 |
전 소마세월님의 팁으론 2%로 부족해서 이 팁을 통해 롤오버 2차메뉴 설정을 제대로 하게 됬네요
감사합니다.