Snippet 본문

기본형 (GNB 상단메뉴)

등록
이동원 (등록일 : 2013/03/07    최종수정일 : 2013/03/08)
Type
Mobile
설명
GNB 상단메뉴 기본형
미리보기
Html
<ul class="gnb_comm">
	<li class="fst on"> <!-- 선택된 메뉴에 on 클래스 추가 -->
		<a href="#none" class="link_menu">홈</a>
	</li>
	<li>
		<a href="#none" class="link_menu">레시피</a>
	</li>
	<li>
		<a href="#none" class="link_menu">테마</a>
	</li>
	<li>
		<a href="#none" class="link_menu">식단</a>
	</li>
	<li class="lst">
		<a href="#none" class="link_menu">MY</a>
	</li>
</ul>
CSS
.gnb_comm {overflow:hidden;width:100%}
.gnb_comm li {float:left;width:21.25%}
.gnb_comm .fst {width:15%}
.gnb_comm .lst {overflow:hidden;float:none;width:auto}
.gnb_comm .link_menu {display:block;height:38px;font-weight:bold;font-size:15px;line-height:40px;background-color:#dc6148;text-align:center;color:#fff;letter-spacing:-1px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);-webkit-text-shadow:0 1px 0 rgba(0,0,0,0.15);text-shadow:0 1px 0 rgba(0,0,0,0.15)}
.gnb_comm .on .link_menu {background-color:#a54936}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기