이런식으로 우측에 있는 더보기버튼을 클릭하면, 회색박스에 있는 더보기 메뉴가 뜨는걸 구현하고 싶었다.
그래서 간단하게 jQuery 나 bootstrap 에서 제공하는걸 사용하려고 찾아봤지만,
클릭시 노출되는 리스트는 data-content="" 여기안에 넣어야해서 네비게이션이나 각 기능들을 넣어야 하는 나로선 사용하기가 어려웠다.
(data-content 안에서는 html 태그도 안먹음...)
그래서 CSS를 찾아 직접 구현해보았다.
1. 더보기 버튼의 이미지 우측값, 하단값을 가져와서 리스트의 css top, right에 적용시킨다.
2. 리스트는 float 되는 형식으로 떠야하므로 z-index=10 값을 준다.
3. 더보기 버튼의 position은 relative / 리스트의 position은 absoulte로 준다.
<head-css>
| .moreDetail{ display : none; } #more{ position : relative; margin-left: auto; } #moreContent{ position : absolute; border-radius: 10%; background-color : #E8E8E8; align : right; z-index : 10; } | cs |
<head-javascript>
| //*더보기 클릭 $(".moreImg").on("click", function(){ var top = $(this).offset().top+$(this).outerHeight(true); //떠야하는 상단 위치 var right = ($(window).width() - ($(this).offset().left+$(this).outerWidth())); //떠야하는 우측위치 $("#moreContent").css("top",top).css("right",right); //떠야하는 위치에 if( $(".moreDetail").is(":visible")){ $(".moreDetail").slideUp(); }else{ $(".moreDetail").slideDown(); } }) | cs |
<body>
| <!-- 더보기 버튼 클릭시 노출될 항목 --> <span id="moreContent"> <span class="moreDetail" id="modifyBoard">게시물수정</span><br> <span class="moreDetail" id="deleteBoard">게시물삭제</span><br> <span class="moreDetail" id="inquireBoard">게시물신고</span><br> </span> <div class="container"> . . <!-- 더보기 버튼 --> <div id="more"><img class="moreImg" src="/images/board/more.png" style="cursor:pointer;width:20px;height:20px;margin-top:10px"></div> . . </div> | cs |
댓글