Moon의 개발일기 내용 옮김 http://moonformeli.tistory.com/11
jQuery를 이용한 메뉴 접었다 펼치기[더보기 기능]
Moon Moonformeli 2017.07.05 16:50
간단하면서도 쉬운 메뉴 펼치기를 구현해보도록 하겠습니다. jQuery의 클래스 선택자만 이용하면 아주 간단하게 구현할 수 있는 기능입니다.
우선, jQuery의 선택자에 대해 모르시면 잠시 들렀다 오세요.
그럼 시작해보겠습니다.
먼저 틀이 되는 HTML을 작성해보겠습니다.
기본 코드의 바탕은, 네이버 메인사이트의 [더보기]를 참고했습니다.
아래 사진을 보실게요.
사진에서처럼 두 개의 span 태그가 존재하고, '더보기' 라는 텍스트는 자식 태그에 삽입이 되어 있는 상태입니다. 아래에 적용된 CSS코드를 보겠습니다.
위의 그림은 background-image에 적용된 이미지의 url에 실제로 저장되어 있는 그림 파일입니다. 그림 파일이 많아질 경우에는 저런 식으로 하나의 파일에 모두 담은 후에, background-position을 이용해 원하는 위치에 있는 내역을 잘라서 가져오기도 합니다.
background-position에 대해 모르시면 잠시 들렀다오세요.
.more 클래스에서는 원하는 위치의 그림을 불러오고 display:block, width, height 속성을 적용해 그림 파일이 온전한 제 영역을 가질 수 있도록 설정하였습니다. block이나 inline-block 둘 중에 하나로는 반드시 설정해야 높이와 너비를 설정할 수 있으니 잊지마세요!
block, inline 속성에 대해 모르시면 잠시 들렀다오세요.
.blind 클래스에서는 기존에 존재하는 텍스트를 지워주기 위해 clip 속성을 이용했는데요. 좌표 값을 상하좌우 모두 0으로 설정해서 결국에는 보여지게 되는 영역이 '없게 되는' 원리를 이용했습니다. 어떻게보면 편법같습니다.
clip속성을 사용하기 위해선 반드시 position:absolute 를 설정해야한다는 점 기억해두세요!
다음으로는 클릭할 때 '더보기'와 '접기'가 번갈아가면서 나오도록 설정해보도록 하겠습니다.
| .more:hover, .close:hover { | |
| cursor:pointer; | |
| } | |
| .close { | |
| display:block; | |
| background-image:url('https://s.pstatic.net/static/www/img/2017/sp_nav_v170523.png'); | |
| width: 42px; | |
| height: 16px; | |
| background-position: -166px -78px; | |
| } |
| $(document).ready(function(){ | |
| $('.more').click(function(){ | |
| if($('.more').hasClass('more')){ | |
| $('.more').addClass('close').removeClass('more'); | |
| }else if($('.close').hasClass('close')){ | |
| $('.close').addClass('more').removeClass('close'); | |
| } | |
| }); | |
| }); |
.close 클래스에 대한 속성은 좌표값만 달라졌을 뿐 .more와 동일하게 적용이 되었습니다. 그리고 마우스가 올라갔다는 것을 보여주기 위해 cursor속성을 pointer로 설정을 해주었습니다. 좀 더 직관적으로 변했죠?
그리고 다음으로는 jQuery를 사용했는데요. .more 클래스가 클릭이 되었을 경우에, 각각 경우에 수를 따집니다. hasClass 속성을 이용해 클래스가 있는지 판별을 먼저 하고 그에 따른 값 변경을 해주게 됩니다. 여기서 뭔가 살짝 이상한데, .more에 클릭이 되었을 경우에 클래스 명이 .close로 변경이 되는데 여전히 클릭 이벤트는 .more가 받는다는 것입니다. 이 부분은 저도 왜 그런것인지 정확하게는 모르겠습니다. 혹시 아시는 분이 있다면 댓글로 정정해주시면 감사하겠습니다.
현재까지 완성된 결과물을 확인해보겠습니다.
다음으로는 펼쳐져서 보여질 메뉴를 만들어보겠습니다.
| <div class="board"> | |
| <ul class="list"> | |
| <li>가계부</li> | |
| <li>날씨</li> | |
| <li>네이버 예약</li> | |
| <li>네이버 캐스트</li> | |
| <li>네이버 클라우드</li> | |
| </ul> | |
| <ul class="list"> | |
| <li>만화 / 웹툰</li> | |
| <li>매거진캐스트</li> | |
| <li>메모</li> | |
| <li>뮤직</li> | |
| <li>부동산</li> | |
| </ul> | |
| <ul class="list"> | |
| <li>영화</li> | |
| <li>오디오클립</li> | |
| <li>오피스</li> | |
| <li>웹소설</li> | |
| <li>자동차</li> | |
| </ul> | |
| </div> |
| .board { | |
| font-family:'돋움'; | |
| font-size:13px; | |
| position:absolute; | |
| top:30px; | |
| width:410px; | |
| height:135px; | |
| background:pink; | |
| } | |
| .list { | |
| float:left; | |
| } | |
| .list li { | |
| list-style:none; | |
| margin-top:5px; | |
| } | |
| .list li:hover { | |
| text-decoration:underline; | |
| cursor:pointer; | |
| } |
네이버에서 더보기를 눌렀을 때 나오는 메뉴의 일부분을 가져와 리스트 형식으로 배치를 시켜놓았습니다. 총 3개의 ul은 float:left가 적용이 되어 가로로 나란히 배열이 되어 있는 상태이고, 넓이와 높이는 적당히 설정해주었습니다.
이제 남은 부분은 바로, jQuery 부분에 메뉴를 접었다 펼쳤다 할 때 같이 유동적으로 보였다가 가려졌다가 하는 부분만 추가하면 끝입니다.
| .board { | |
| visibility:hidden; | |
| } |
우선 .board에는 visibility:hidden이 적용이 되어 있어야합니다. 왜냐하면 이 부분을 건드릴 것이기 때문이죠.
| $(document).ready(function(){ | |
| $('.more').click(function(){ | |
| if($('.more').hasClass('more')){ | |
| $('.more').addClass('close').removeClass('more'); | |
| /* Added Part */ | |
| $('.board').css('visibility', 'visible'); | |
| }else if($('.close').hasClass('close')){ | |
| $('.close').addClass('more').removeClass('close'); | |
| /* Added Part */ | |
| $('.board').css('visibility', 'hidden'); | |
| } | |
| }); | |
| }); |
jQuery를 이용하면 아주 간단히 CSS를 건드릴 수 있습니다. 경우에 수에 맞게끔 visibility를 변경해주면 됩니다.
최종적으로 완성된 결과물입니다.
이상으로 모든 작업이 끝났습니다.
어떻게보면 매우 간단하게 만들 수 있는 것이지만 모르셨던 분들은 제 포스팅이 도움이 되었길 바랍니다.
