본문 바로가기

콘텐츠 옆에 고정되는 퀵메뉴, 퀵뷰, 소셜바 만들기 (CSS)

2019.08.21 댓글 8

페이지의 오른쪽 또는 왼쪽에 고정되는 퀵메뉴나 소셜바(Social bar), 사이드바 등을 만들 때 다음과 같이 CSS의 fixed를 사용하면 편리합니다.

width: 160px; /* Set the width of the sidebar or side tab */
position: fixed; /* Fixed Sidebar or Side Tab (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0; /* Stay at the right */

위와 같은 코드를 사용하면 브라우저의 오른쪽에 해당 요소가 고정됩니다.

퀵메뉴나 어떤 요소를 콘텐츠 바로 옆에 고정되도록 만들고 싶은 경우가 있을 수 있습니다. 그런 경우 다음과 같은 CSS 코드를 활용할 수 있습니다.

right: calc(50% - 화면 가운데로부터 퀵메뉴의 오른쪽 끝부분까지의 너비);

그림으로 살펴보며 쉽게 이해할 수 있습니다.

최대 너비값이 되었을 때 안보이게 하려면 미디어쿼리로 display: none으로 처리하면 됩니다.

심플한 예제를 하나 만들어보았습니다. 실제 작동을 다음 jsfiddle에서 확인해볼 수 있습니다.

예제 CSS:

.content {
  margin-left: 75px;
  font-size: 30px;
  max-width: 800px;
  width: 100%;
  margin:0 auto;
}

.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right:calc(50% - 460px); /* right:calc(50% - social bar width/2) */
}

@media screen and (max-width:920px){
.icon-bar {
  display: none;
  }
}

샘플 jsfiddle 코드는 w3schools.com의 How TO - Sticky Social Bar(고정 소셜바를 만드는 방법)의 코드를 응용한 것입니다.

워드프레스에서도 위와 같은 방법을 그대로 이용할 수 있고, 정교한 기능을 원하는 경우 플러그인을 사용할 수 있습니다.

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글8