[XE/라이믹스] 네비게이션 (GNB)

html

<!-- GNB -->
<nav cond="$GNB->list" class="gnb" id="gnb">
<div id="mobile_menu_btn" class="menu_btn">
<div class="menu_bar">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
</div>
</div>
<ul>
<li loop="$GNB->list => $key1, $val1" class="xxxl"|cond="trim($val1['desc']) == 'bigger'">
<!--
{$val1['desc']}
-->
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']|noescape}</a>
<block cond="$val1['selected']">{@ $_selected_menu = $val1}</block>
<ul cond="$val1['list']" class="depth2<?php echo trim($val2['desc']) == 'category' ? ' xxxl' : ''; ?>">
<li loop="$val1['list'] => $key2, $val2" class="more"|cond="$val2['list']">
<!--
{$val2['desc']}
-->
<block cond="trim($val2['desc']) == 'category'">
<p class="gnb-category">{$val2['link']|noescape}</p>
</block>
<block cond="trim($val2['desc']) != 'category'">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window'] == 'Y'">{$val2['link']|noescape}</a>
</block>







<ul cond="$val2['list']" class="depth3">
<li loop="$val2['list'] => $key3, $val3">


<block cond="trim($val3['desc']) == 'gensei'">

<div class = "menu_geum"><p class="gnb-category2"> <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'">{$val3['link']|noescape}</a></p></div>
</block>


<block cond="trim($val3['desc']) == 'menu_ex'">
<div class = "depth32"><p class="more"> <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'">{$val3['link']|noescape}</a></p></div>


<ul cond="$val3['list']" class="ddd {trim($val3['desc'])}">
<li loop="$val3['list'] => $key4, $val4">
<a href="{$val4['href']}" target="_blank"|cond="$val4['open_window'] == 'Y'">{$val4['link']|noescape}</a>
</li>
</ul>

</block>




<block cond="trim($val3['desc']) != 'gensei'">
<block cond="trim($val3['desc']) != 'menu_ex'">
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window'] == 'Y'">{$val3['link']|noescape}</a>



</block>
</block>
<!---->




<!---->




<block cond="trim($val3['desc']) == 'show4depth'">
<ul cond="$val3['list']" class="depth4 {trim($val3['desc'])}">
<li loop="$val3['list'] => $key4, $val4">
<a href="{$val4['href']}" target="_blank"|cond="$val4['open_window'] == 'Y'">{$val4['link']|noescape}</a>
</li>
</ul>
</block>



</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /GNB -->

 

css

.gnb{position:relative;display:inline-block;vertical-align:middle;z-index:1;max-width:742px;height:100%;font-size:13px;}
.gnb a{text-decoration:none;white-space:nowrap}
.gnb>ul>li{float:left;position:relative;text-align:left}
.gnb>ul:after{display:block;clear:both;content:''}
.gnb>ul>li>a{display:block;position:relative;padding:0 13px;line-height:72px;font-size:15px;font-weight:700;color:#888}
.gnb>ul>li.on>a,.gnb>ul>li>a:focus,.gnb>ul>li>a:hover{color:#10305c}
.gnb>ul .depth2{position:absolute;z-index:2;padding:15px 0;background-color:#fff}
.gnb>ul .depth2>li{position:relative}
.gnb>ul .depth2>li>a{font-size:14px}
.gnb>ul .depth2:after{position:absolute;top:-3px;left:0;width:100%;height:3px;background-color:#fe0;content:''}
.gnb>ul .depth2 a{display:block;position:relative;height:40px;padding:0 30px 0 20px;line-height:40px;font-size:13px;color:#9d9d9d}
.gnb>ul .depth2 a:active,.gnb>ul .depth2 a:focus,.gnb>ul .depth2 a:hover,.gnb>ul .depth2>li.on>a{color:#10305c}
.gnb>ul .depth3{padding:8px 0}
.gnb>ul .depth32, .gnb>ul .depth32 a {padding:8px 8px 8px 8px;font-size:14px;}
.gnb>ul .depth4{padding:0 0 4px 10px}
.gnb>ul .depth42{padding:0 0 8px 15px;background-color: blue;}
.gnb>ul .depth2>li.more>a:after{position:absolute;right:20px;content:'>'}