CSS 스크롤 따라다니는 메뉴 만들기(플로팅 메뉴)

요즘 웹 서핑을 하다보면 상단의 메뉴가 따라다니는 것을 심심치 않게 볼 수 있다.

이를 플로팅 메뉴라고 한다.

필자는 처음 퍼블리셔를 시작하고 이 메뉴를 처음 봤는데  '복잡한 자바스크립트나 제이쿼리가 들어가겠지?' 라고 생각했지만, CSS만으로도 충분히 쉽게 만들 수 있던 기능이어서 충격을 받았었다.

물론 자바스크립트나 제이쿼리로 못 만든다는 것은 아니다.

 

플로팅 메뉴는 왜 사용하는가?

1. 사용자 경험 향상: 플로팅 메뉴는 사용자가 웹 페이지를 스크롤할 때 항상 메뉴에 쉽게 액세스할 수 있도록 한다. 이렇게 함으로써 사용자는 내비게이션을 찾기 위해 맨 위로 스크롤할 필요가 없어지므로 사용자 경험이 향상 된다.
2. 내비게이션 효율성 증대: 긴 페이지에서 사용자가 내비게이션 메뉴를 지속적으로 사용할 수 있도록 함으로써 내비게이션 효율성을 높일 수 있다. 사용자가 다른 섹션으로 이동하거나 특정 부분에 빠르게 이동할 수 있다.
3. 디자인의 일관성: 플로팅 메뉴는 일관된 디자인을 제공하여 사용자가 페이지를 탐색할 때 일관성을 유지할 수 있다.  사용자는 페이지 내 어디에 있든지 항상 동일한 내비게이션을 볼 수 있다.
4. 공간 활용: 플로팅 메뉴는 페이지 상단 공간을 효율적으로 활용하여 추가 콘텐츠를 표시할 수 있다. 이렇게 함으로써 더 많은 정보나 기능을 페이지에 추가할 수 있다.
5. 시각적 강조: 사용자가 플로팅 메뉴를 볼 때 해당 메뉴가 주요 내비게이션 요소임을 시각적으로 강조할 수 있다. 이는 사용자에게 현재 페이지 내의 중요한 섹션이라는 인식을 전달할 수 있다.

이러한 이유로 플로팅 메뉴는 사용자 경험을 향상시키고 웹 페이지 내비게이션을 보다 효율적으로 만들기 위해 널리 사용되고 있다.

 

html 코드

<nav>
    <ul>
      <li>
        <a href="#">menu01</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">menu02</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">menu03</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">menu04</a>
        <ul>
          <li><a href="#">submenu1</a></li>
          <li><a href="#">submenu2</a></li>
          <li><a href="#">submenu3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
<div class="contents">따라다니는 메뉴</div>

 

 

2024.03.20 - [IT/HTML & CSS] - CSS 드롭다운 메뉴(gnb) 만들기

CSS 드롭다운 메뉴(gnb) 만들기

반응형

 

CSS 작성

body{height:2000px;}
nav{position:fixed; width: 100%;max-width:1000px;border:1px solid #dfdfdf;}
nav ul{list-style: none;z-index: 2;}
nav a{color:#000;text-decoration: none;}
nav li > ul > li{color:#333;}
nav > ul{display: flex;width: 100%;justify-content: space-between;padding:10px;}
nav > ul > li{position: relative;}
nav > ul > li > a{font-size: 20px;font-weight: bold;padding:10px 0;}
nav > ul > li > a:hover{color:#999;}
nav > ul > li > ul{display: none; position: absolute; left:50%; transform: translateX(-50%);border:1px solid #ddd;border-radius: 6px;background: #fff;}
nav > ul > li:hover ul{display:block;}
nav > ul > li  li a{display: block; padding:10px 15px;}
nav > ul > li  li a:hover{background:#eee;}
nav > ul > li > li + li{margin-top:5px;}
.contents{padding-top:100px;}

 

위와 같이 CSS를 작성해 주는데 여기서 플로팅 메뉴를 사용하기 위해 nav의 position을 fixed로 설정해 주면 간단하게 플로팅 메뉴를 사용할 수 있다.

 

 

최종코드

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

 

 

"fixed" 메뉴는 사용자가 스크롤하더라도 화면의 특정 위치에 고정되어 있는 메뉴 이다.

이 메뉴는 화면의 다른 부분을 스크롤할 때 항상 보이며 사용자가 메뉴를 클릭하여 다른 섹션으로 이동할 수 있다. 

사용자가 페이지를 스크롤할 때 항상 화면의 동일한 위치에 표시되므로 사용자 경험을 개선하고 내비게이션을 효율적으로 제공할 수 있다.

 

 

오늘의 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다.