메뉴에 마우스를 오버하면 그려지는 선

구조의 특징

  • 마우스를 오버할때 그려지는 선을 포함한 영역은 position:absolute로 설정하는 것이 좋다.
  • 선이 그려질 영역을 모두 차지할 수 있어야 한다. 넓이 100%일때 예상한 선이 모두 그려져야 한다.
  • jquery에서 요소의 넓이를 오버한 메뉴의 x좌표값을 얻어 그 값으로 한다. $(this).offset().left;는 브라우저 왼쪽에서 부터 메뉴까지의 떨어진 거리값 이다.
  • 만약 선의 색이 그라데이션이라면 배경이미지로 등록하고 영역의 넓이를 제어하는 것이 좋다.

    • 기본 html 구조

    <div class="gnb"> <div class="wrap"> <ul> <li><a href="#n"> 메뉴명 </a></li> </ul> </div> <div class="gnb_line"></div> /*그릴 선*/ </div>

    기본 css 코드

    .gnb{position: relative;} /*gnb_line 정렬의 중심*/
.gnb .gnb_line{
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 0;
	height: 5px;
	background: linear-gradient(to right, skyblue, yellow);
}

    jquery소스

    jquery 소스보기