Layout Template : LNB Sample

LNB Sample

UI Layout grid 사용법
  • List LNB Sample : 1depth 메뉴로만 사용할 경우에는 list를 사용해서도 LNB를 만들 수 있습니다.
    Icon Object를 활용해서 메뉴별로 icon을 넣어서 좀 더 비쥬얼하게 활용할 수 있습니다.
    Icon Object를 추가할 경우 메뉴명 부분도 span tag로 감싸주고 간격을 Helper css로 조정해주면 좀 더 완성도 있는 메뉴를 만들 수 있습니다.
  • Accordion을 사용한 sample은 Object Template를 참조해주세요. (Accordion left menu sample 바로가기)
  • Tabs 와 Tree를 활용한 LNB 메뉴는 복잡한 메뉴 구조를 가지고 있을때 사용하면 유용합니다.
List를 활용한 LNB Menu
						
							<!--자식이 없는 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>
						
					
Tab 내 Tree를 활용한 LNB Menu
								
									<!--복잡한 메뉴 구조를 가지고 있는 경우 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>
								
							
SK Holdings C&C

26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.