이해를 위해 디자인요소는 최소화하여 시궁창수준이므로 눈은 가리고 보는걸 추천한다.
1 2 3 4 5 | <nav> <ul id='game'>게임</ul> <ul id='paint'>그림</ul> <ul id='song'>노래</ul> </nav> | cs |
무난하게 네비게이션에 3개의 요소만 넣었다.
이런 식으로 네비게이션에 마우스를 올렸을 때 숨겨진 탭이 등장하도록 기획한다.
일단 nav요소의 디자인을 대충 css로 만져준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | *{margin: 0;padding: 0} nav{ width: 300px; height: 40px; border: 1px solid #747474; border-radius: 5px; background: #fff; } nav ul{ padding: 10px 5px; box-sizing: border-box; float: left; } nav ul:hover{background: #000} | cs |
일단 이대로만 구동시켜보자.
https://jsfiddle.net/6xo1k7zq/
아무도 안 쓸 것 같은 네비게이션이 탄생했다.
이제 절반은 온것이다.
본격적으로 제이쿼리를 이용해 탭 레이아웃을 만들어보자.
일단 탭 레이아웃은 네비게이션의 요소 안에 숨겨진 채로 존재해야한다.
예를 들면
1 2 3 4 5 6 7 8 | <nav> <ul id='game'> 게임 <div>탭 레이아웃</div> </ul> <ul id='paint'>그림</ul> <ul id='song'>노래</ul> </nav> | cs |
이런 식으로 nav의 요소에 해당되는 ul안에 또다른 요소로 탭 레이아웃이 비집고 들어왔다.
하지만 ul에 마우스를 올렸을 때 탭 레이아웃이 보여야 하기 때문에
일단 처음엔 보이지 않아야 하는것이 정상이다.
그러니 css에서 스타일로 display:none 설정을 해줘야 한다.
그리고 ul을 hover했을 때 비로소 보이도록 해주어야만 한다.
이때 필요한것이 바로 자바스크립트 단이다. (이 글에서는 제이쿼리를 쓸것이다.)
<html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <nav> <ul id='game'> 게임 <div>탭 레이아웃</div> </ul> <ul id='paint'>그림</ul> <ul id='song'>노래</ul> </nav> <!-- # Jquery Include --> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $('nav ul').hover(function(){ // nav ul에 마우스를 올릴 경우 $('nav ul div').css('display','block'); }, function(){ // nav ul에 마우스를 내릴 경우 $('nav ul div').css('display','none'); }); </script> |
<css>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | *{margin: 0;padding: 0} nav{ width: 300px; height: 40px; border: 1px solid #747474; border-radius: 5px; background: #fff; } nav ul{ padding: 10px 5px; box-sizing: border-box; float: left; } nav ul:hover{background: #000} nav ul div{ /* 탭 레이아웃 css, 크기와 색깔 그리고 display:none 속성만 대충 넣었다. */ width: 100px; height: 100px; background:#2cf8e1; display: none; } | cs |
이 결과물을 링크에서 확인해보자.
https://jsfiddle.net/xpvt214o/311323/
여전히 개 쓰레기같은 디자인이지만 코드에 어딘가 또 장애가 있다.
전혀 탭 레이아웃 같지 않은 이벤트같다.
그 이유는, 탭 레이아웃의 위치를 바꾸지 못해서이다.
탭 레이아웃을 ul 요소에 상대적으로 위치시키기 위해서는
부모의 position을 relative로 바꾸어야 하고,
또 자식은 absolute상태여야 한다.
css를 통해 저 영역만 따로 알아보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | nav ul{ padding: 10px 5px; box-sizing: border-box; float: left; position: relative; } nav ul:hover{background: #000} nav ul div{ width: 100px; height: 100px; left:0; background:#2cf8e1; display: none; position: absolute; } | cs |
이런 식으로 바꿔주면
https://jsfiddle.net/buxsk23j/2/
결과처럼 그래도 이렇게 탭같은 면모를 갖춘 네비게이션이 탄생하게 된다.
이제 여기서 탭을 ul로 바꾸고 네비게이션의 냄새날것같은 디자인까지 바꿔주면 완성이다.
<All Code>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <style> *{margin: 0;padding: 0} nav{ width: 300px; height: 40px; border: 1px solid #747474; border-radius: 5px; background: #fff; } nav ul{ padding: 10px 5px; box-sizing: border-box; float: left; position: relative; } nav ul:hover{background: #000} nav ul div{ width: 100px; height: 100px; background:#2cf8e1; display: none; position: absolute; } </style> <nav> <ul id='game'> 게임 <div>탭 레이아웃</div> </ul> <ul id='paint'>그림</ul> <ul id='song'>노래</ul> </nav> <!-- # Jquery Include --> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $('nav ul').hover(function(){ $('nav ul div').css('display','block'); }, function(){ $('nav ul div').css('display','none'); }); </script> | cs |
