<!--자식이 없는 1depth menu를 사용할 때 활용할 수 있는 sample 입니다.-->
<ul class="List">
<!-- <span class="Icon Star"></span> : icon을 처리한 부분 -->
<!-- <span>Status Menu01</span> : 메뉴명 span tag로 처리한 부분(아이콘과 vertical-align을 맞춰주기 위해)-->
<li class="Link"><a href="링크"><span class="Icon Star"></span><span>Status Menu01</span></a></li>
<li class="Link"><a href="링크"><span class="Icon User"></span><span>Status Menu02</span></a></li>
<li class="Link"><a href="링크"><span class="Icon File"></span><span>Status Menu03</span></a></li>
<li class="Link"><a href="링크"><span class="Icon Book"></span><span>Status Menu04</span></a></li>
<li class="Link"><a href="링크"><span class="Icon Tint"></span><span>Status Menu05</span></a></li>
<li class="Link"><a href="링크"><span class="Icon Inbox"></span><span>Status Menu06</span></a></li>
<li class="Link"><a href="링크"><span class="Icon Check"></span><span>Status Menu07</span></a></li>
</ul>
tab2 Contents
<!--복잡한 메뉴 구조를 가지고 있는 경우 Alopex UI Tab Menu를 활용하여 대메뉴를 구분하고 해당 탭의 contents 영역에 Alopex UI의 'Tree' 를 활용하여 LNB 상세 메뉴를 만들수 있습니다.
'Tree'와 'Tab Menu'의 상세 사용은 ui.alopex.io 에서 확인하실 수 있습니다. -->
<div class="Tabs">
<ul>
<li data-content="#tab1">tab1</li>
<li data-content="#tab2">tab2</li>
</ul>
<div id="tab1">
<ul class="Tree">
........
</ul>
</div>
<div id="tab2">tab 2 content</div>
</div>
26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.