CSS를 이용한 앵커네비게이션(?)

자바스크립트를 사용하지 않고 CSS만 이용하여 탭메뉴같은 UI를 만들수 있는 방법이 있어서 블로그 한다.

 

http://naradesign.net 를 참고 하였으며, 아래 예제 코드는 본인이 직접 작성 하였다. 블로그 에디터로 제작하여, 스타일을 먹이는데 제한되었으므로, 어떤방식인지만 볼수있도록 코딩한다.

 

 

• a메뉴 내용
• b메뉴 내용
• c메뉴 내용

내용 1

내용 2

내용 3

위의 코드는 다음과 같다.

<UL style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
<LI style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100px; PADDING-TOP: 0px; HEIGHT: 40px"><A href="#M_01">a메뉴 내용</A></LI>
<LI style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100px; PADDING-TOP: 0px; HEIGHT: 40px"><A href="#M_02">b메뉴 내용</A></LI>
<LI style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100px; PADDING-TOP: 0px; HEIGHT: 40px"><A href="#M_03">c메뉴 내용</A></LI></UL>
<DIV style="OVERFLOW: hidden; WIDTH: 300px; HEIGHT: 300px">
<DIV id=M_01 style="BACKGROUND: red; WIDTH: 300px; HEIGHT: 300px">내용 1</DIV>
<DIV id=M_02 style="BACKGROUND: gray; WIDTH: 300px; HEIGHT: 300px">내용 2</DIV>
<DIV id=M_03 style="BACKGROUND: green; WIDTH: 300px; HEIGHT: 300px">내용 3</DIV></DIV>

위 예제는 컨텐츠의 내용이 가로폭과 세로폭이 동일할경우 사용이 가능하다.

먼저 일반 앵커와 마찬가지로 링크에 앵커값을 넣어준뒤,

해당 div컨텐츠의 아이디로 이동할수 있더록 id값에도 같은 값을 넣어준다.

다음으로 컨텐츠 영역 전체를 같은 크기의 div로 감싼후 overflow 의 값을 hidden 으로 주게 되면,

해당 컨텐츠를 제외한 나머지 영역이 숨겨지므로, 자바스크립트로 구연하는 탭메뉴와 같은 효과를 줄수 있다.