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

2019. 8. 21. 00:01 | 댓글 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(고정 소셜바를 만드는 방법)의 코드를 응용한 것입니다.

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

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    공수래공수거

    이런 코드를 만드시는분들 정말 대단하십니다.ㅎ

  2. thumbnail
    인생2막은 EnJoY

    빨리 제 블로그에도 적용하는 그날을 기다립니다..ㅎㅎ
    전 아직 테크니컬한 부분이 많이 부족해서..ㅠㅠ

  3. thumbnail
    내로라하다

    역시 좋은 정보네요^^ 훌륭합니다. ㅋ

  4. thumbnail
    [찌쏘]'s Magazine

    나중에 신규로 만들고 있는 블로그에 적용해 봐야겠네요~ ^^ 굿~