이런식으로 우측에 있는 더보기버튼을 클릭하면, 회색박스에 있는 더보기 메뉴가 뜨는걸 구현하고 싶었다.
그래서 간단하게 jQuery 나 bootstrap 에서 제공하는걸 사용하려고 찾아봤지만,
클릭시 노출되는 리스트는 data-content="" 여기안에 넣어야해서 네비게이션이나 각 기능들을 넣어야 하는 나로선 사용하기가 어려웠다.
(data-content 안에서는 html 태그도 안먹음...)
그래서 CSS를 찾아 직접 구현해보았다.
1. 더보기 버튼의 이미지 우측값, 하단값을 가져와서 리스트의 css top, right에 적용시킨다.
2. 리스트는 float 되는 형식으로 떠야하므로 z-index=10 값을 준다.
3. 더보기 버튼의 position은 relative / 리스트의 position은 absoulte로 준다.
반응형
'Frontend > CSS' 카테고리의 다른 글
| [CSS] CSS로 인스타그램 마우스오버 이벤트 적용하기 (0) | 2018.07.22 |
|---|---|
| textarea 선택 영역 파란테두리 없애는 방법 (0) | 2018.07.16 |
| @media와 flex 활용하여 화면 줄였을 때 보여지는 정렬순서 바꾸기 (0) | 2018.07.12 |
| CSS의 flex활용하여 인스타그램, 페이스북처럼 유저정보 만들기 (0) | 2018.07.12 |
| CSS 처음 접할때 공부하기 좋은 사이트 (0) | 2018.07.02 |
댓글