LNB

유형 1
(temp_lnb_type1)
유형 2
(temp_lnb_type2)
유형 3
(temp_lnb_type3)
유형 4
(temp_lnb_type4)

유형 2(코드명: temp_lnb_type2)

다운로드

접기

도움말

코드보기

지원 브라우저 : (7~10)

CSS Code

.nation_menu{clear:both; height:25px; padding-left:15px; background:url('../image/temp/bg_sc_line.gif') repeat-x;}

.nation_menu li{float:left;}

.nation_menu a{display:block; width:100%; height:25px; background-image:url('../image/temp/gnb_sc_menu.gif'); background-repeat:no-repeat; font-size:0px; line-height:0px; text-indent:-9999;}

.nation_menu li.menu_kor a{width:86px; height:25px; background-position:-10px -59px;}

.nation_menu li.menu_us a{width:86px; height:25px; background-position:-96px -59px;}

.nation_menu li.menu_jp a{width:86px; height:25px; background-position:-182px -59px;}

.nation_menu li.menu_ch a{width:86px; height:25px; background-position:-268px -59px;}

.nation_menu li.menu_ep a{width:86px; height:25px; background-position:-354px -59px;}

.nation_menu li.menu_pct a{width:107px; height:25px; background-position:-440px -59px;}

.nation_menu li.menu_docdb a{width:107px; height:25px; background-position:-547px -59px;}

.nation_menu li.menu_etc a{width:107px; height:25px; background-position:-654px -59px;}

.nation_menu li.menu_kor_on a{width:86px; background-position:-10px -90px;}

.nation_menu li.menu_us_on a{width:86px; background-position:-96px -90px;}

.nation_menu li.menu_jp_on a{width:86px; background-position:-182px -90px;}

.nation_menu li.menu_ch_on a{width:86px; background-position:-268px -90px;}

.nation_menu li.menu_ep_on a{width:86px; background-position:-354px -90px;}

.nation_menu li.menu_pct_on a{width:107px; background-position:-440px -90px;}

.nation_menu li.menu_docdb_on a{width:107px; background-position:-547px -90px;}

.nation_menu li.menu_etc_on a{width:107px; background-position:-654px -90px;}

.nation_btn_sidebox{float:right; width:91px; height:25px; background:url('../image/temp/btn_sc_clse.gif') no-repeat;}

.nation_btn_sidebox a{display:block; width:100%; height:25px; background-image:url('../image/temp/btn_sc_clse.gif'); background-repeat:no-repeat; font-size:0px; line-height:0px; text-indent:-9999;}

.nation_btn_sidebox p.btn_fd a{float:left; width:41px; margin-right:10px; background-position:-0px -30px; font-size:0px; line-height:0px; text-indent:-9999;}

.nation_btn_sidebox p.btn_unfd a{float:left; width:41px; margin-right:10px; background-position:-0px -60px; font-size:0px; line-height:0px; text-indent:-9999;}

.nation_btn_sidebox p.btn_sc_help a{float:left; width:16px; margin-left:5px; background-position:-58px -30px; font-size:0px; line-height:0px; text-indent:-9999;}

HTML Code

<div class="nation_menu">

<ul>

<li class="menu_us"><a href="#">미국</a></li>

<li class="menu_jp"><a href="#">일본</a></li>

<li class="menu_ch"><a href="#">중국</a></li>

<li class="menu_ep"><a href="#">EP</a></li>

<li class="menu_pct"><a href="#">PCT(WO)</a></li>

<li class="menu_docdb"><a href="#">DOCDB</a></li>

<li class="menu_etc"><a href="#">기타개별국</a></li>

</ul>

<div class="nation_btn_sidebox">

<p class="btn_fd"><a href="#">접기</a></p>

<p class="btn_unfd" style="display:none;"><a href="#">열기</a></p>

<p class="btn_sc_help"><a href="#" target="_blank">도움말</a></p>

</div>

Image

gnb_sc_menu.gif
bg_sc_line.gif
btn_sc_clse.gif

* 본 코드는 WIPS Markup Coding Convention을 100% 준수합니다.
* HTML 마크업 구조는 템플릿 형식에서 벗어나지 않도록 합니다.
* DTD는 HTML 4.01 Transitional(loose.dtd)기준 입니다.
* 디자인에 따른 해당 UI의 CSS는 서비스 별로 다르게 적용 가능합니다.