4단 자동 메뉴 출력 > 시즌3 테마 설정 및 가이드

이윰 테마는 관리자에서 입력한 메뉴가 3단까지만 출력됩니다.

회원분들 중 4단 메뉴 출력을 문의하는 분들이 있어 프로그램은 패치가 진행되었으며 테마에서 출력하는 소스를 입력하면 4단 메뉴까지 출력이 가능합니다.

단 이에 맞춰 4단 메뉴는 CSS 디자인을 하셔야 합니다.

basic3 테마를 기준으로 소스 추가 위치를 알려드리며 입력소스는 동일하니 사용하는 테마 위치에 적용하기 바랍니다.

상단 메인 메뉴에 4단 메뉴 출력 방법

파일 : eyoom/theme/테마명/layout/head_bs.html

전

<ul class="dropdown-menu">
<!--{/}-->
    <li class="dropdown-submenu {? ..active}active{/}">
        <a href="{..me_link}" target="_{..me_target}"><!--{? ..me_icon}--><i class="fa {..me_icon}"></i> <!--{/}-->{..me_name}<!--{? ..new}-->&nbsp;<i class="fa fa-check-circle color-red margin-left-5"></i><!--{/}--><!--{? ..sub=='on'}--><i class="fa fa-angle-right sub-caret hidden-sm hidden-xs"></i><i class="fa fa-angle-down sub-caret hidden-md hidden-lg"></i><!--{/}--></a>
		<!--{@ subsub}-->
		<!--{? ...index_ == 0}-->
        <ul class="dropdown-menu">
        <!--{/}-->
            <li class="dropdown-submenu {? ...active}active{/}">
                <a href="{...me_link}" target="_{...me_target}"><!--{? ...me_icon}--><i class="fa {...me_icon}"></i> <!--{/}-->{...me_name}<!--{? ...new}-->&nbsp;<i class="fa fa-check-circle color-red margin-left-5"></i><!--{/}--><!--{? ...sub=='on'}--><i class="fa fa-angle-right sub-caret hidden-sm hidden-xs"></i><i class="fa fa-angle-down sub-caret hidden-md hidden-lg"></i><!--{/}--></a>
            </li>
        <!--{? ...index_ == ...size_-1}-->
        </ul>
		<!--{/}-->
		<!--{/}-->
    </li>
<!--{? ..index_ == ..size_-1}-->
</ul>
<!--{/}-->

후

<ul class="dropdown-menu">
<!--{/}-->
    <li class="dropdown-submenu {? ..active}active{/}">
        <a href="{..me_link}" target="_{..me_target}"><!--{? ..me_icon}--><i class="fa {..me_icon}"></i> <!--{/}-->{..me_name}<!--{? ..new}-->&nbsp;<i class="fa fa-check-circle color-red margin-left-5"></i><!--{/}--><!--{? ..sub=='on'}--><i class="fa fa-angle-right sub-caret hidden-sm hidden-xs"></i><i class="fa fa-angle-down sub-caret hidden-md hidden-lg"></i><!--{/}--></a>
		<!--{@ subsub}-->
		<!--{? ...index_ == 0}-->
        <ul class="dropdown-menu">
        <!--{/}-->
            <li class="dropdown-submenu {? ...active}active{/}">
                <a href="{...me_link}" target="_{...me_target}"><!--{? ...me_icon}--><i class="fa {...me_icon}"></i> <!--{/}-->{...me_name}<!--{? ...new}-->&nbsp;<i class="fa fa-check-circle color-red margin-left-5"></i><!--{/}--><!--{? ...sub=='on'}--><i class="fa fa-angle-right sub-caret hidden-sm hidden-xs"></i><i class="fa fa-angle-down sub-caret hidden-md hidden-lg"></i><!--{/}--></a>
                <!--{* 4단 메뉴 *}-->				
				<!--{@ ssubsub}-->
				<!--{? ....index_ == 0}-->
                <ul class="dropdown-menu">
                <!--{/}-->
                    <li class="dropdown-submenu {? ....active}active{/}">
                        <a href="{....me_link}" target="_{....me_target}"><!--{? ....me_icon}--><i class="fa {....me_icon}"></i> <!--{/}-->{....me_name}<!--{? ....new}-->&nbsp;<i class="fa fa-check-circle color-red margin-left-5"></i><!--{/}--><!--{? ....sub=='on'}--><i class="fa fa-angle-right sub-caret hidden-sm hidden-xs"></i><i class="fa fa-angle-down sub-caret hidden-md hidden-lg"></i><!--{/}--></a>
                    </li>
                <!--{? ....index_ == ....size_-1}-->
                </ul>
				<!--{/}-->
				<!--{/}-->
                <!--{* 4단 메뉴 끝 *}-->
            </li>
        <!--{? ...index_ == ...size_-1}-->
        </ul>
		<!--{/}-->
		<!--{/}-->
    </li>
<!--{? ..index_ == ..size_-1}-->
</ul>
<!--{/}-->

서브페이지 사이드 메뉴 4단 출력 방법

파일 : eyoom/theme/테마명/layout/side_bs.html

전

<!--{? !defined('_INDEX_')}-->
<ul class="sidebar-nav-e1 list-group" id="sidebar-nav">
	<!--{@ sidemenu}-->
    <li class="list-group-item list-toggle {? .active}active{/}">
		<a {? C.G5_IS_MOBILE && sidemenu.submenu}data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-{.key_}"{:}href="{.me_link}" target="_{.me_target}"{/}>
			{.me_name}<!--{? .new}--><i class="fa fa-circle color-red margin-left-5"></i><!--{/}-->
		</a>
        <ul id="collapse-{.key_}" class="collapse {? .active}in{/}">
			<!--{@ submenu}-->
            <li class="{? ..active}active{/}">
            	<a href="{..me_link}" target="_{..me_target}">
	            	{..me_name}
	            	<!--{? ..new}-->
	            	<i class="fa fa-circle color-red margin-left-5"></i>
	            	<!--{/}-->
            	</a>
            </li>
			<!--{/}-->
        </ul>
    </li>
	<!--{/}-->
</ul>
<!--{/}-->

후

<!--{? !defined('_INDEX_')}-->
<ul class="sidebar-nav-e1 list-group" id="sidebar-nav">
	<!--{@ sidemenu}-->
    <li class="list-group-item list-toggle {? .active}active{/}">
		<a {? C.G5_IS_MOBILE && sidemenu.submenu}data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-{.key_}"{:}href="{.me_link}" target="_{.me_target}"{/}>
			{.me_name}<!--{? .new}--><i class="fa fa-circle color-red margin-left-5"></i><!--{/}-->
		</a>
        <ul id="collapse-{.key_}" class="collapse {? .active}in{/}">
			<!--{@ submenu}-->
            <li class="{? ..active}active{/}">
            	<a href="{..me_link}" target="_{..me_target}">
	            	{..me_name}<!--{? ..new}--><i class="fa fa-circle color-red margin-left-5"></i><!--{/}-->
            	</a>
                <!--{* 4단 메뉴 *}-->
		        <ul id="collapse-{.key_}-{..key_}" class="collapse {? ..active}in{/}">
					<!--{@ subsub}-->
		            <li class="{? ...active}active{/}">
		            	<a href="{...me_link}" target="_{...me_target}">
			            	{...me_name}<!--{? ...new}--><i class="fa fa-circle color-red margin-left-5"></i><!--{/}-->
		            	</a>
		            </li>
					<!--{/}-->
		        </ul>
                <!--{* 4단 메뉴 끝 *}-->
            </li>
			<!--{/}-->
        </ul>
    </li>
	<!--{/}-->
</ul>
<!--{/}-->