1
조회 수 : 5798 신고 : 0
출처 : |
---|
지식인 게시판에 서브타이틀을 좀 더 간편히 나타낼 방법이 없을까 하고 질문을 남긴 적이 있는데요.
http:///166246
1,2,3차 메뉴가 있다고 가정했을 때
3차 메뉴를 클릭했을 때 상위의 2차 메뉴가 나타나고,
2차 메뉴에도 2차 메뉴가 출력되는 코드가 있으면 될 것 같아서
<!--@if($menu_1st['link'])-->{$selected_menu=$key}<!--@end-->
이렇게 하니깐 @menu_1st는 그 두번째 메뉴이고요. 두번째 메뉴의 $key를 가져올 수 있으면
<!--@if($menu_1st['link'])-->
<span class="subtitle_{$selected_menu=$key}"></span>
<!--@end-->
레이아웃에는 이렇게만 작성하고
css 파일에서
.subtitle_1232423 {}
이렇게 키 번호에 맞는 메뉴 갯수대로만 작성하면 아래와 같이 긴 코드는 필요 없지 않을까요 ^^a;;;
물론 이런 위젯이 나온다면 이런 고생 안해도 되겠지만요. ㅠ_ㅠ;
1) 웹미니 스킨에서 서브타이틀을 나타낸 방법
<!-- 왼쪽 2차 메뉴 -->
<!--@if($menu_1st)-->
<div id="lnbWrap">
<!--@if('webtip' == $mid || 'hometip' == $mid || 'windows' == $mid || 'linux' == $mid || 'dreamweaver' == $mid || 'flash' == $mid || 'photoshop' == $mid || 'zeroboard' == $mid || 'html' == $mid || 'javascript' == $mid || 'css' == $mid || 'standard' == $mid || 'accessibility' == $mid || 'etctip' == $mid)-->
<h2 class="tip"><span>팁공유방</span></h2>
<!--@end-->
<!--@if('pds_xe' == $mid || 'pds_level' == $mid || 'pds_zb4' == $mid || 'pds_photoshop' == $mid || 'pds_special' == $mid)-->
<h2 class="pds"><span>자료실</span></h2>
<!--@end-->
<!--@if('csssite' == $mid || 'bestsite' == $mid || 'freesite' == $mid || 'skinsite' == $mid)-->
<h2 class="site"><span>사이트</span></h2>
<!--@end-->
<!--@if('community' == $mid || 'freeboard' == $mid || 'member' == $mid || 'faq' == $mid || 'goodboard' == $mid || 'bestboard' == $mid || 'question' == $mid || 'kin' == $mid || 'flashgame' == $mid || 'admini' == $mid)-->
<h2 class="community"><span>커뮤니티</span></h2>
<!--@end-->
<!--@if('life' == $mid || 'beauty' == $mid || 'food' == $mid || 'movie' == $mid || 'book' == $mid || 'it_science' == $mid || 'earlyadopter' == $mid || 'hobby' == $mid || 'travel' == $mid || 'childcare' == $mid)-->
<h2 class="life"><span>라이프</span></h2>
<!--@end-->
<!--@if('iphone' == $mid)-->
<h2 class="iphone"><span>아이폰</span></h2>
<!--@end-->
2) 이온디 사이트 예전 레이아웃에서 사용했던 방법
{@ $sub_title = array(
'center'=>'center','mhboard'=>'center','notice'=>'center','build'=>'center','feedback'=>'center','about'=>'center','theme'=>'center','sitemap'=>'center','traffic'=>'center','phpinfo'=>'center','trash'=>'center','inside'=>'inside','planner'=>'inside','todo'=>'inside','timetable_2008_2'=>'inside','sig'=>'inside','chat'=>'inside','monologue'=>'inside','me'=>'inside','nick'=>'inside','love'=>'inside','2u'=>'inside','propose'=>'inside','ahj'=>'inside','gallery_main'=>'gallery','favimg'=>'gallery','gallery'=>'gallery','people'=>'gallery','myphoto'=>'gallery','style'=>'gallery','manstyle'=>'gallery','todayimage'=>'gallery','KimYeongAe'=>'gallery','photogallery'=>'gallery','project'=>'project','readability'=>'project','hangeul'=>'project','hanja'=>'project','senario'=>'project','lifelog'=>'project','memobook'=>'project','freeimg'=>'project','tip'=>'tip','webtip'=>'tip','photoshop'=>'tip','css_naming'=>'tip','coding'=>'tip','layout'=>'tip','local_layout'=>'tip','source'=>'tip','colortable'=>'tip','images'=>'tip','icon'=>'tip','font'=>'tip','font_download'=>'tip','xe'=>'tip','xe_main'=>'tip','xe_skin'=>'tip','xe_bug'=>'tip','zb4'=>'tip','xe_idea'=>'tip','pds'=>'tip','cgi'=>'tip','webservice'=>'tip','adsense'=>'tip','jwfn'=>'tip','jwfn_template'=>'tip','jwfn_download'=>'tip','jwfn_qna'=>'tip','jwfn_idea'=>'tip','service'=>'collection','book'=>'collection','movie'=>'collection','poem'=>'collection','nakunpoem'=>'collection','music'=>'collection','musicplayer'=>'collection','mov'=>'collection','cf'=>'collection','ani'=>'collection','handwriting'=>'collection','favicon'=>'collection','harmonica'=>'collection','banner'=>'collection','error404'=>'collection','eng_study'=>'collection','eng_agony'=>'collection','news'=>'collection','eng_sentence'=>'collection','eng_voca'=>'collection','eng_wnr'=>'collection','eng_reading'=>'collection','ebs'=>'collection','ebsradio'=>'collection','business'=>'collection','stock'=>'collection','econote'=>'collection','financial_tech'=>'collection','community'=>'community','bbs'=>'community','qna'=>'community','guestbook'=>'community','scrap'=>'community','question'=>'community','todaycomment'=>'community','link'=>'community','campaign'=>'community','savethedeveloper'=>'community','mynote'=>'mynote','attach'=>'mynote'
);}
<!--@if($sub_title[$mid])-->
<div class='subtitle_{$sub_title[$mid]}'></div>
<!--@end-->
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 아이콘이 붙게됩니다.
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
댓글 '10'
음.. 그런가요..? XE팁게시판에 올려주셨으면 더 좋을뻔했어요.. 개발이란게 항상 편리하고 좋은 방법이 있으면 그걸 선택하는게 맞는거지요.. 사이트에서 중요한것 중에 하나가 로딩속도입니다. 당연히 소스가 늘어나면 용량이 커지게 마련입니다.. 주신팁 웹미니에 적용해 보도록하겠습니다.^^
대충 소스를 보니 이미지를 백그라운드로 의미없이 보여주는 마크업은 좋지 못합니다.
백그라운드로 하더라도 의미가 있다면 문구를 적어주는 방법도 좋을듯해요.. <div class='subtitle_{$sub_title[$mid]}'><span>{$sub_title[$mid]}</span></div> 여기서 span 은 포지션과 z-index:-1로 화면상에는 가려줄수는 있겠네요..
중요한건 이미지가 안보일시 그이미지가 어떤건지 이미지를 대체할수 있는 텍스트가 있어야합니다. (의미가 없다면 제외)
잘못 보신 것 같은데 아래 2번은 제가 예전에 사용했던 좀 노가다식 방법이라 추천하지 않고
필요한 부분은 이겁니다.
빽짱구님께서 말씀하신 부분을 추가하면 이렇게 되겠네요.
<!--@if($menu_1st['link'])-->
<div
class="subtitle_{$selected_menu=$key}"><span>{$val['text']}</span></div>
<!--@end-->
.subtitle_상위메뉴의키넘버 {}
이렇게만 작성하면 위의 저 어마어마한 부분은 따로 적지 않아도 자동으로 알아서 처리해준다는 것이죠..
그리고 이 글 팁공유방으로 옮겨주세요..^^;;;
적용하시는 방법에 대해서 알려드리자면,
우선 아래 코드를 작성해서 레이아웃에 우선 삽입시켜주시고요.
<!--@if($menu_1st['link'])-->
<div
class="subtitle_{$selected_menu=$key}"><span>{$val['text']}</span></div>
<!--@end-->
팁공유방, 자료실, 사이트, 커뮤니티, 포토갤러리, 라이프, 아이폰
메뉴에 접속해서 나오는 $key값을 알아둔 뒤에
css파일에서
.subtitle_각메뉴에 해당하는 키번호
를 적어서 삽입해주시면 짠~하고 완성되지 않을까요. ^^;
2차를 선택하더라도 1차의 $mid를 출력해주는 걸 안다면 mid값 적는게 더 편할텐데
mid는 제가 어떻게 얻어오는지 몰라서요..;;
<!--@if($val['link'])-->
<!--@if($main_menu)-->
<!--@if($val['selected'])-->
<div style="border:1px solid #EEEEEE;background:#FDFCFD;width:98%;margin-bottom:5px;position:relative;height:150px;text-align:center;vertical-align:middle;color:#898D92;font-weight:bold;font-size:14px;font-family:맑은 고딕;letter-spacing:-1px;">
<span style="position:relative;top:30%;">
1.{$val['text']}<br>
2.{$mid}<br>
<!--@if($menu_1st['link'])-->
3.{$selected_menu=$key}<!--@end-->
</span>
</div>
<!--@end-->
<!--@end-->
<!--@end-->
<!--@end-->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['selected'])-->
<a href="{$val['href']}"><div class="subtitle {$selected_menu=$key}"><span>{$val['text']}{$selected_menu=$key}</span></div></a>
<!--@end--><!--@end-->
정리하자면 이렇게입니다. (__);; 실제 사용 코드입니다.
/* 서브타이틀 */
.subtitle {
width:118px; height:70px;
}
.subtitle span {visibility:hidden;}
.k164949 {background:url(../images/subtitle_eond.png);}
.k158191 {background:url(../images/subtitle_webdeveloper.png);}
.k176218 {background:url(../images/subtitle_likefirst.png);}
.k164964 {background:url(../images/subtitle_inside.png);}
.k176376 {background:url(../images/subtitle_life.png);}
.k158192 {background:url(../images/subtitle_community.png);}
.k161033 {background:url(../images/subtitle_gallery.png);}
.k164867 {background:url(../images/subtitle_project.png);}
.k176221 {background:url(../images/subtitle_help.png);}
혹은 이미지 한장으로 만든 뒤 배경의 위치 조정만 할 수도 있겠네요. ^^