홈페이지 제작 - 헤더 디자인 변경

홈페이지 외주건으로 제작이 90% 완료된 시점에서 중단되어 완성을 위해 제작을 맡게 된 건이다

 

- 헤더 변경 사항 -

기존 : 마우스 오버시 각각의 메뉴마다 따로 소메뉴가 나오는 형태라 약간의 불편함이 있음

현재 : 마우스 오버시 전체 메뉴와 소메뉴를 한번에 볼 수 있음

 

기존의 헤더

 

 

변경된 헤더

 

로고와 메뉴들이 좁게 뭉쳐진 느낌이였고 지금은 확 트여보이게 변경되었다.

마우스오버시 소메뉴 아래에 border가 1px로 애니메이션이 들어갔는데 width가 0px인 상태에서 0.2초간 가로 100%로 변경(중간에서 시작해서 좌우로 꽉 차게)

 

기존의 헤더 css소스를 약간의 추가, 수정을 통해 변경하였다.

애니메이션 transition 기술에 있어서 display: none 항목이 있어선 먹히질 않기 때문에 이 부분을 주석하고 이리저리 애를 좀 먹다가 완성이 되긴 했다.

 

<div id="header" class="clearfix imsi_header">
	<div class="hd_inner header_inner clearfix">
		<h1 class="logo"><a href="#"><img src="theme/basic/img/logo.png"></a></h1>
		<ul class="gnb_ul clearfix">
			<li class="gnb_li">
				<a href="#" class="gnb_a">COMPANY</a>
				<div class="gnb02_box">
					<div class="inner">
						<ul class="gnb02 gnb02_01">
							<li class="gnb02_li"><a href="#">CEO 인사말</a></li>
							<li class="gnb02_li"><a href="#">연혁</a></li>
							<li class="gnb02_li"><a href="#">인증 및 수상</a></li>
							<li class="gnb02_li"><a href="#">특허</a></li>
						</ul>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>

(위)기존 헤더 부분 코드

 

 

 

<div id="header" class="clearfix imsi_header">
	<div class="menu-hover-box"></div>
	<div class="hd_inner header_inner clearfix">
		<h1 class="logo"><a href="#"><img src="theme/basic/img/logo.png"></a></h1>
		<ul class="gnb_ul clearfix">
			<li class="gnb_li">
				<a href="#" class="gnb_a">COMPANY</a>
				<div class="gnb02_box">
					<div class="inner">
						<ul class="gnb02 gnb02_01">
							<li class="gnb02_li"><a href="#">CEO 인사말</a></li>
							<li class="gnb02_li"><a href="#">연혁</a></li>
							<li class="gnb02_li"><a href="#">인증 및 수상</a></li>
							<li class="gnb02_li"><a href="#">특허</a></li>
						</ul>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>

(위)변경된 헤더 부분 코드

 

 

 

 

마우스오버시 전체 메뉴를 보여줄 큰 사각 박스가 필요했기 때문에 header아래에 <div class="menu-hover-box"></div>를 추가

 

#header .menu-hover-box {position:absolute;left:0;right:0;background:#fff;top:80px;height:0;border-top:1px solid #dddddd;transition:all .2s linear;-webkit-transition:all .2s linear;opacity:0;}
#header:hover .menu-hover-box {height:248px;opacity:1;}

 

menu-hover-box가 마우스오버시 아래로 스무스하게 내려오는 효과를 위해 초기화를 height:0px; opacity:0;을 주었고

헤더에 마우스 오버시 menu-hover-box의 높이를 248px; opacity:1을 줌으로써 높이가 위에서 아래로 떨어지며 자연스럽게 보이는 효과를 줌.

 

 

 

 

#header .gnb02_box {background:transparent;height:0;bottom:-1px;;transition:all .2s linear;-webkit-transition:all .2s linear;opacity:0;visibility:hidden}
#header:hover .gnb02_box {opacity:1;visibility:visible;}

 

gnb02_box는 소메뉴를 감싸는 div 항목이다. visibility:hidden을 준 이유는 마우스를 헤더에 올렸을 때 전체 메뉴들이 나와야 정상인데 gnb02_box가 눈으로는 안 보이지만 이미 헤더 바깥에 absolute로 존재를 하고 있기 때문에 마우스를 헤더에 올라기 전에 보이지 않는 gnb02_box영역에 닿이면 메뉴들이 나오는 문제가 있었다. visibility:hidden으로 영역을 없애주고 :hover시 visible로.

 

 

 

 

#header .gnb02 li a {position:relative;color:transparent;transition:all .2s linear;-webkit-transition:all .2s linear;}
#header .gnb02 li a:before {content:"";position:absolute;bottom:-4px;width:0;height:1px;left:50%; background:#0065d6;transition:all .2s linear;-webkit-transition:all .2s linear;}
#header:hover .gnb02 li a {color:#666;}
#header:hover .gnb02 li a:hover {color: #0065d6;}
#header:hover .gnb02 li a:hover:before {width:100%;left:0;}

 

그다음 소메뉴 아래에 :before를 이용해 마우스 오버시 밑줄이 그어지는 애니메이션 적용.

먼저 마우스 오버 전에 #header .gnb02 li a:before를 content:"";속성으로 가상의 공간을 만들어주고 position:absolute로 위치를 잡아준다. 그전에 absolute는 부모영역을 기준으로 위치를 잡기 때문에 #header .gnb02 li a에 position:relative속성을 준다. width:0으로 초기화, 높이는 밑줄의 크기만큼 1px을 주고 background로 색상을 준다. 

left:50%는 밑줄이 정 가운데에서 좌우로 퍼지게 보이게 하기 위해 우선 중간에 위치하여야 하므로 50%로 위치를 중앙에 배치해준다. 

헤더에 마우스오버 > 소메뉴 gnb02 li a에 마우스오버 됐을 시 before의 가로사이즈가 100%가 되어야 하고 left:50%로 중앙 위치에서 left:0px 위치로 오게끔 해주면 중앙에서부터 좌우로 꽉 차는 애니메이션 효과를 줄 수 있다. 

#header:hover .gnb02 li a:hover:before {width:100%;left:0;} << 이렇게

 

:before를 주지 않고 a태그 요소에 border-bottom:1px solid #0065d6를 주어도 보기에 다르진 않지만 이 속성은 가로값을 줄 수 없기 때문에 애니메이션을 적용하기 위해서는 부적절하다.