XE(XpressEngine)와 관련된 유용한 정보를 공유하는 곳입니다.

관련메뉴 XE 스킨 | 제로보드4 팁
  • 웹미니 한줄 전광판 영역 입니다.
글 수 93

1

조회 수 : 5798 신고 : 0

작성자 : 이온디
포인트 : 1161 | 레벨 : 3
출처 :  

지식인 게시판에 서브타이틀을 좀 더 간편히 나타낼 방법이 없을까 하고 질문을 남긴 적이 있는데요.

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개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '10'

profile
title: [ani]깜빡이는 표정빽짱구 (168670)

2010.02.24 23:10:28

음.. 그런가요..? XE팁게시판에 올려주셨으면 더 좋을뻔했어요.. 개발이란게 항상 편리하고 좋은 방법이 있으면 그걸 선택하는게 맞는거지요.. 사이트에서 중요한것 중에 하나가 로딩속도입니다. 당연히 소스가 늘어나면 용량이 커지게 마련입니다.. 주신팁 웹미니에 적용해 보도록하겠습니다.^^

 

대충 소스를 보니 이미지를 백그라운드로 의미없이 보여주는 마크업은 좋지 못합니다.

백그라운드로 하더라도 의미가 있다면 문구를 적어주는 방법도 좋을듯해요.. <div class='subtitle_{$sub_title[$mid]}'><span>{$sub_title[$mid]}</span></div> 여기서 span 은 포지션과 z-index:-1로 화면상에는 가려줄수는 있겠네요..

중요한건 이미지가 안보일시 그이미지가 어떤건지 이미지를 대체할수 있는 텍스트가 있어야합니다. (의미가 없다면 제외)

이온디 (168691)

2010.02.25 00:01:31

작성자

잘못 보신 것 같은데 아래 2번은 제가 예전에 사용했던 좀 노가다식 방법이라 추천하지 않고

필요한 부분은 이겁니다.

빽짱구님께서 말씀하신 부분을 추가하면 이렇게 되겠네요.


<!--@if($menu_1st['link'])-->

<div class="subtitle_{$selected_menu=$key}"><span>{$val['text']}</span></div>

<!--@end-->


.subtitle_상위메뉴의키넘버 {}


이렇게만 작성하면 위의 저 어마어마한 부분은 따로 적지 않아도 자동으로 알아서 처리해준다는 것이죠..

그리고 이 글 팁공유방으로 옮겨주세요..^^;;;

이온디 (168705)

2010.02.25 00:05:32

작성자

적용하시는 방법에 대해서 알려드리자면,

우선 아래 코드를 작성해서 레이아웃에 우선 삽입시켜주시고요.


<!--@if($menu_1st['link'])-->

<div class="subtitle_{$selected_menu=$key}"><span>{$val['text']}</span></div>

<!--@end-->


팁공유방, 자료실, 사이트, 커뮤니티, 포토갤러리, 라이프, 아이폰

메뉴에 접속해서 나오는 $key값을 알아둔 뒤에


css파일에서


.subtitle_각메뉴에 해당하는 키번호

를 적어서 삽입해주시면 짠~하고 완성되지 않을까요. ^^;

2차를 선택하더라도 1차의 $mid를 출력해주는 걸 안다면 mid값 적는게 더 편할텐데

mid는 제가 어떻게 얻어오는지 몰라서요..;;


이온디 (168714)

2010.02.25 00:16:23

작성자
    <!--@foreach($main_menu->list as $key => $val)-->
        <!--@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-->
이온디 (168720)

2010.02.25 00:18:26

작성자

넣어보시면 필요한 게 뭔지 아실거에요.

2번은 현재 선택한 mid명

1번은 상위 메뉴의 메뉴명

3번은 상위메뉴의 키값

이온디 (168725)

2010.02.25 00:27:50

작성자

/* EOND */
.subtitle_164949 {}
/* 웹디벨로퍼 */
.subtitle_158191 {}
/* 라이크퍼스트 */
.subtitle_176218 {}
/* 인사이드 */
.subtitle_164964 {}
/* 라이프 */
.subtitle_176376 {}
/* 커뮤니티 */
.subtitle_158192 {}
/* 갤러리 */
.subtitle_161033 {}
/* 프로젝트 */
.subtitle_164867 {}
/* 도움말 */
.subtitle_176221 {}


이런 식으로 클래스에 작성하면 되겠고요..


이온디 (168734)

2010.02.25 00:34:27

작성자

<!--@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);}


혹은 이미지 한장으로 만든 뒤 배경의 위치 조정만 할 수도 있겠네요. ^^

왼쪽 (182589)

2010.04.08 16:21:21

어렵다~ㅠㅠ

사랑이 (184202)

2010.04.15 16:56:48

자초지종이 어떻게 되어서 이런 글이 된건지...

 

초보? 라서 그런지 난데 없이 이런글이... 궁금하네요 @@

 

다른 분들을 위해서 좀더 구체적인 질문과 답변 팁을 주셨으면 합니다.

 

여차 저차한 문제점이 발견되었다 ===> 이왕이면 캡쳐 이미지와 함께....

 

원글 지식인 글도 역시나... 이해가 좀 어렵내요.....

 

이왕이면 글의 문제점?을 처음 접한 분들을 위해서...

 

그간의 문제점 발견한 화면이나 설명도 곁들이면 좋겠네요 ㅎㅎ

풍향 (195677)

2010.05.24 09:27:52

어렵네요..

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
33 카테고리 질문드릴께요 꼭좀 봐주세요! [1] 안씨 2010-09-03   4183
32 권한이 없을때 경고창 띄우고 원하는 페이지로 보내기 [6] title: [ani]깜빡이는 표정빽짱구 2010-08-09   5175
31 로그인한 회원에게만 원하는걸 보여주자. [4] title: [ani]깜빡이는 표정빽짱구 2010-07-24 2 4195
30 XE 속도 향상 팁 (코어 수정 팁) file [8] rjsoo 2010-06-26   4865
29 익스플로어 버젼별로 화면이 다르게 출력 됩니다 - -; file [7] 마도로스 2010-04-02   5389
28 새글표시 애드온 사용시 1차메뉴를 2차메뉴중 게시판으로 연결한 경우 file [2] 세발자전거 2010-03-20 1 5817
27 슬라이드 되는 최근 이미지스킨 수정해 올립니다. file [8] 한주네 2010-02-25 2 8412
26 서브타이틀 나타내는 방법 [10] 이온디 2010-02-24 1 5798
25 출석 체크 위젯 사용시 날짜네비게이션이 먹통일때. [3] 세발자전거 2010-02-06   5913
24 초보자를 위한 카테고리를 이미지로 보여주기 [4] 세발자전거 2010-01-29 1 5189
23 XE 1.4.0.2 로 업데이트후 특정페이지가 연결이 안될때 title: [ani]깜빡이는 표정빽짱구 2010-01-25 1 5644
22 갑자기 사이트가 모두 께질때 file [4] 뉴클리어 2010-01-24   5107
21 게시물에 파일첨부후 한글이 안써질때 [12] title: [ani]깜빡이는 표정빽짱구 2009-11-25 3 7926
20 탭형식의 최근문서 출력 위젯 이용하기... file [13] title: 버섯이슬이 2009-11-10 2 6704
19 페이지 수정[꾸미기] 시에 위젯상자 반듯하게 넣어주자~ file [10] 뉴클리어 2009-11-10 2 5545
18 비회원 글쓰기 버튼 숨기기 [15] title: 버섯이슬이 2009-11-09 4 8968
17 회원가입시 이름 & 닉네임 제한 [2] title: 버섯이슬이 2009-11-09   4872
16 게시판 분류(카테고리 숨기기) title: 버섯이슬이 2009-11-09   5531
15 회원아이디 클릭시 메일보내기 숨기기 [2] title: 버섯이슬이 2009-11-09   4825
14 굿자바 구직스킨 시리즈 file 부동산잡 2009-11-07   5025