Q&A

서브메뉴 선택시 색깔구현

2016.03.23 01:13
1,251
0

제 사이트 에서는 서브메뉴를 적용해도 xe타운이나 공홈처럼 해당 카테고리를 선택했을때 색깔 변경이 안되는되요 별도로 레이아웃에서 설정해줘야되는 팁이 있는건가요? 이것저것 해봤는데 제 실력으로는 너무 어려워서요 어디를 수정해야되는지 어떤 코드를 어디에 넣어야 되는지만 알려주시면 감사하겠습니다. 

 

xe타운 서브메뉴 색깔 변경되는 부분

Cap 2016-03-23 10-04-51-828.png

 

공홈 캡쳐화면

 

Cap 2016-03-23 10-07-43-932.jpg

 

 

아래 이미지는 제 사이트 서브 메뉴 입니다.

Cap 2016-03-23 10-11-34-503.png

 

 

 

댓글 22

  • 2016.03.23 01:27 #236452

    LNB라던지 어떤 네비게이션 목록을 loop문으로 돌려서 출력되는 걸거예요
    그 루프문 안에다가
    선택되었을 경우의 리스트 클래스를 넣어줘요(물론 루프문 코드를 자세히 봐야 정확한 코드를 알려드리겠지만요..)
    <li class="on"|cond="$val1['selected']"><a href="{$val1['href']}">{$val1['link']}</a></li>

    class="on"을 조건부로 가져오는겁니다 뒤에 붙은 |cond="조건" 에 해당되지 않으면 그냥 li속성만 남게되겠죠

    예시일 뿐입니다~ 암튼..
    이러고 on에만 백그라운드 밝게 글씨 어둡게 이런식으로 스타일 변화를 줘놓으면 해당 모듈에서 밝게 불이 켜지겠죠?

  • 2016.03.23 01:37 #236472
    실례지만 어느부분을 수정해야되는지 알려주실수 있을까요.. 접속이 필요하시면 접속 계정 쪽지로 드리겠습니다. ㅠㅠ
  • 2016.03.23 02:02 #236523
    어떤 레이아웃을 쓰시는지 저는 모르니까요..
    레이아웃 파일중에 찾아보세요 모양으로 봐선 xedition인것 같기도 한데..
    파일에서 lnb를 검색해서(당연히 lnb로 색인이 안돼있을 수도 있습니다. 안나오면 layout.html을 눈으로 샅샅이 찾아보세요) 네비게이션을 어떻게 구현했는지 보시고 그 반복문을 제가 말씀드린걸 단서로 손보면서 테스트 해보시면 될 것 같습니다.
  • 2016.03.23 02:05 #236533

    네 찿았습니다. ^^ 일단 한번 해보겠습니다. 코드는 혹시 몰라서 올려봅니다 

    <!-- LNB -->
            <nav cond="$_selected_menu['list'] && $layout_info->layout_type === 'sub' && $layout_info->sidebar_position !== 'none'" class="lnb">
                <ul>
                    <li loop="$_selected_menu['list'] => $key1, $val1">
                        <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']}</a>
                        <ul cond="$val1['list']">
                            <li loop="$val1['list'] => $key2, $val2" class="on"|cond="$val2['selected']">
                                <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window'] == 'Y'">{$val2['link']}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            <img class="zbxe_widget_output" widget="DWbasic" skin="default" content_type="comment" module_srls="{$module_info->module_srl}" list_type="normal" tab_type="none" markup_type="table" list_count="10" page_count="1" category_range="all" option_view="title" show_browser_title="N" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="regdate" order_type="desc" thumbnail_type="crop" /></nav>
            <!-- /LNB -->

  • 2016.03.23 02:20 #236591

    어 여긴 다르게 적용해야겠는데요 이렇게 들어가면 loop이 돌기전에 조건문이 들어가서 안돌아갈 지도 모르겠네요

    안된다면 그 하위에 있는 앵커태그<a>에 조건부class를 넣어서 스타일을 입혀주세요

  • 2016.03.23 02:24 #236603
    죄송해요 설명해주신 부분 제가 잘 이해를 못하고 있습니다. 코드로 알려주실수 있을까요?
  • 2016.03.23 01:31 #236459
    헉 쉬운게 아니네요.ㅠㅠ
  • 2016.03.23 02:35 #236628

    <ul cond="$val1['list']"> 1차메뉴에 하위메뉴가 존재하는 경우 ul 출력
      <li loop="$val1['list'] => $key2, $val2" class="on"|cond="$val2['selected']"> 1차메뉴의 하위메뉴 목록에서 2차메뉴의 키와 밸류가 있는만큼 불러온다(값이 있는 만큼loop) 하지만 class="on"불러오기로 한 조건문은 val2값을 불러온 후에 selected인지 판별을 해야하는데 순서상으로 제대로 돌아갈지 의문
        <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window'] == 'Y'" 새창열기인데 우린 그냥 삭제하죠>{$val2['link']}</a>
      </li>
    </ul>

     

    그래서 class="on"|cond="$val2['selected']"를 밑에 있는 a 태그쪽에 넣으면 li를 loop으로 불러온 후 실행되니까 잘 될 것 같습니다 라고 이야기 하고 싶었는데 li에 적용해서 쓴 적도 있는데 회사라 제 사이트 소스 뒤져보기가 좀 애매한 상황이라..

    암튼 잘 안되시면 일단 앵커태그에 넣어보세요..

  • 2016.03.23 02:56 #236705
    <li loop="$_selected_menu['list'] => $key1, $val1">
    <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']}</a>
    <ul cond="$val1['list']">
    <li loop="$val1['list'] => $key2, $val2" class="on"|cond="$val2['selected']">
    <a href="{$val2['href']}">{$val2['link']}</a>
    <li class="on"|cond="$val1['selected']"></a></li>
    </li>
    </ul>
    답변글 감사합니다. 아래처럼 코드를 넣어 보았는데 변경되는게 없는것 같아요 바쁘신것 같은데 정말 죄송합니다. 언제라도 괜찮습니다. 시간되실때 소스를 다시한번 확인 부탁드립니다. 감사합니다.
  • 2016.03.23 03:01 #236737

    넣더라도 이렇게 넣으셔야해요

     

    <ul>
                    <li loop="$_selected_menu['list'] => $key1, $val1">
                        <a href="{$val1['href']}">{$val1['link']}</a>
                        <ul cond="$val1['list']">
                            <li loop="$val1['list'] => $key2, $val2">
                                <a href="{$val2['href']}" class="on"|cond="$val2['selected']">{$val2['link']}</a>
                            </li>
                        </ul>
                    </li>
                </ul>

     

    css파일에도 스타일 정의해두신것 맞죠?

     

    .on {font-weight:bold;color:#C02626} (예시)

  • 2016.03.23 03:51 #236777

    .. 아무런 반응이.. 말씀하신 대로css에도 .on {font-weight:bold;color:#C02626;background:#B2CCFF} 이런식으로 적용했습니다. 코드 위치는 맞는것 같은데 전혀 동작을 안하네요

    아 지금 보니 첨부된 이미지 처럼 "갤러리 부분" 상단 메뉴에 css코드가 적용되어서 나타납니다. 일단 상단메뉴에도 css가 적용되니 괜찮은데요? ^^ 서브메뉴에서는 아직 아무런 동작을 하지 않구요..ㅠㅠ

     

    Cap 2016-03-23 12-57-56-245.png

     

     

  • 2016.03.25 11:56 #240089
    <block cond="$category" >
                                {@ $meun_url = parse_url($val1['href']);parse_str($meun_url['query'],$murl);}
                            </block>
                            <li class="on"|cond="$val1['selected'] || ($murl['amp;category']==$category) && $category">

    게시판의 카테고리도 일반 모듈처럼 메뉴 선택표시를 할려면 이렇게 하시면 됩니다.
  • 2016.03.25 12:00 #240096
    감사합니다. 다시 해보겠습니다. 코노리님 질문드린 내용중에 콘텐츠판이나 서비스모듈로 생성된 게시판에서 서브 메뉴 나오게 설정하는 방법도 알수 있을까요..
  • 2016.03.25 12:01 #240100
    게시판처럼 그냥 나오는데요??
  • 2016.03.25 12:04 #240108
    네 새벽시장 무료포인트마켓이 컨텐츠모듈이죠? 저같은경우 컨텐츠모듈이나 서비스판 모듈게시판에서 서브메뉴 자체가 안나타 나더라구요
  • 2016.03.25 12:15 #240128
    뭔가 잘못됬군요. 원래대로라면 게시판처럼 나와야 정상입니다.
  • 2016.03.25 12:08 #240112
    <!-- LNB -->
    <nav cond="$_selected_menu['list'] && $layout_info->layout_type === 'sub' && $layout_info->sidebar_position !== 'none'" class="lnb">
    <ul>
    <li loop="$_selected_menu['list'] => $key1, $val1" class="on"|cond="$val1['selected']">
    <a href="{$val1['href']}">{$val1['link']}</a>
    <ul cond="$val1['list']">
    <li loop="$val1['list'] => $key2, $val2" class="on"|cond="$val2['selected']">
    <a href="{$val2['href']}">{$val2['link']}</a>
    </li>
    </ul>
    </li>
    </ul>
    </nav>
    <!-- /LNB -->
    코노리님 알려주신 코드를 여기서 어떻게 적용해야될까요. 그냥 붙여 넣었더니 오류가 생겨서요
  • 2016.03.25 12:18 #240145

    <li loop="$_selected_menu['list'] => $key1, $val1" class="on"|cond="$val1['selected']">

    이 부분을

     

    <block cond="$category" >
    {@ $meun_url = parse_url($val1['href']);parse_str($meun_url['query'],$murl);}
    </block>
    <li loop="$_selected_menu['list'] => $key1, $val1" class="on"|cond="$val1['selected'] || ($murl['amp;category']==$category) && $category">

     

    변경.

  • 2016.03.25 12:21 #240148

    <li loop="$_selected_menu['list'] => $key1, $val1" class="on"|cond="$val1['selected']"> 이부분만 지우고 덮어 씌웠을때 오류는 생기지 않는데 변화되는 모습은 없는 것 같습니다. 


        <!-- LNB -->
            <nav cond="$_selected_menu['list'] && $layout_info->layout_type === 'sub' && $layout_info->sidebar_position !== 'none'" class="lnb">
                <ul>
                    <block cond="$category" >
    {@ $meun_url = parse_url($val1['href']);parse_str($meun_url['query'],$murl);}
    </block>
    <li loop="$_selected_menu['list'] => $key1, $val1" class="on"|cond="$val1['selected'] || ($murl['amp;category']==$category) && $category">
                        <a href="{$val1['href']}">{$val1['link']}</a>
                        <ul cond="$val1['list']">
                            <li loop="$val1['list'] => $key2, $val2" class="on"|cond="$val2['selected']">
                                <a href="{$val2['href']}">{$val2['link']}</a>

  • 2016.03.25 12:37 #240179
    <!-- LNB -->
    <nav cond="$_selected_menu['list'] && $layout_info->layout_type === 'sub' && $layout_info->sidebar_position !== 'none'" class="lnb">
    <ul>
    <block loop="$_selected_menu['list'] => $key1, $val1">
    <block cond="$category" >
    {@ $meun_url = parse_url($val1['href']);parse_str($meun_url['query'],$murl);}
    </block>
    <li class="on"|cond="$val1['selected'] || ($murl['amp;category']==$category) && $category">
    <a href="{$val1['href']}">{$val1['link']}</a>
    <ul cond="$val1['list']">
    <li loop="$val1['list'] => $key2, $val2" class="on"|cond="$val2['selected']">
    <a href="{$val2['href']}">{$val2['link']}</a>
    </li>
    </ul>
    </li>
    </block>
    </ul>
    </nav>
    <!-- /LNB -->

    그럼 이렇게요...
  • 2016.03.25 12:39 #240186
    네 이제 됩니다... ^^ 쪽지 확인 부탁좀 드릴게요
  • 2016.03.25 12:53 #240209
    정말 감사합니다.