반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>가로메뉴</title>
<script type="text/javascript">
<!--
//글로벌 네비게이션(2Depth 메뉴그룹)에 대한 마우스 또는 키보드 반응(보임/숨김)설정
function activeGNB(id) {
for(num=1; num<=4; num++) document.getElementById('gm'+num).style.display='none'; //D2MG1~D2MG4 까지 숨긴 다음
document.getElementById(id).style.display='block'; //해당 ID만 보임
}
//-->
</script>
<style type="text/css">
/* 공통사항 초기화 - 모든 색상값들은 레이아웃 영역과 문자를 표시하기 위하여 임의로 설정됨 */
ul { list-style:none }
/* 레이아웃 */
#gnb { position:relative; height:60px; background:#333333; margin-bottom:10px; }
#gnb:after { content:""; display:block; clear:both; }
#gnb li { float:left; width:25%; text-align:center; }
#gnb li li { float:left; width:auto; text-align:left; }
#gnb li a { display:block; height:20px; padding-top:10px;color:#fff; }
#gnb li li a { display:inline; height:auto; padding:0; margin:0 10px;color:#fff; }
#gnb li.g1 { background:#666600 }
#gnb li.g2 { background:#669900 }
#gnb li.g3 { background:#66CC00 }
#gnb li.g4 { background:#FFCC00 }
#gnb ul { position:relative;}
#gnb ul ul { position:absolute; top:38px; display:none; white-space:nowrap; }
#gnb ul#gm1 { left:0; }
#gnb ul#gm2 { left:25%; }
#gnb ul#gm3 { left:50%; }
#gnb ul#gm4 { left:75%; }
</style>
<!--[if IE]>
<style type="text/css">
#body,
#gnb,
#gnb li a,
#gnb ul{ zoom:1;}
#gnb ul ul{ _width:100%;}
</style>
<![endif]-->
</head>
<div id="gnb">
<ul>
<li class="g1 active"><a href="#" onmouseover="activeGNB('gm1');" onfocus="activeGNB('gm1');">메뉴 1</a>
<ul id="gm1">
<li class="active"><a href="#">메뉴 1_1 입니다</a></li>
<li><a href="#">메뉴 1_2</a></li>
<li><a href="#">메뉴 1_3</a></li>
</ul>
</li>
<li class="g2"><a href="#" onmouseover="activeGNB('gm2');" onfocus="activeGNB('gm2');">메뉴 2</a>
<ul id="gm2">
<li><a href="#">메뉴 2_1</a></li>
<li><a href="#">메뉴 2_2 입니다</a></li>
<li><a href="#">메뉴 2_3</a></li>
</ul>
</li>
<li class="g3"><a href="#" onmouseover="activeGNB('gm3');" onfocus="activeGNB('gm3');">메뉴 3</a>
<ul id="gm3">
<li><a href="#">메뉴 3_1</a></li>
<li><a href="#">메뉴 3_2</a></li>
<li><a href="#">메뉴 3_3 입니다</a></li>
</ul>
</li>
<li class="g4"><a href="#" onmouseover="activeGNB('gm4');" onfocus="activeGNB('gm4');">메뉴 4</a>
<ul id="gm4">
<li><a href="#">메뉴 4_1 입니다</a></li>
<li><a href="#">메뉴 4_2</a></li>
<li><a href="#">메뉴 4_3</a> </li>
</ul>
</li>
</ul>
</div>
반응형
'CSS HTML5 > 퍼블리싱 팁' 카테고리의 다른 글
| 백그라운드 롤오버~ (0) | 2016.11.09 |
|---|---|
| IE8에서 IE6,7 과 동일하게 보이게 하기 (0) | 2016.11.09 |
| 세로롤링배너 (0) | 2016.11.09 |
| 플래시 웹상보이기 (0) | 2016.11.09 |
| 다른객체로 롤오버하기 (0) | 2016.11.09 |