아임웹 코드 - 원하는 섹션으로 스크롤이 이동하는 플로팅 네비 메뉴

시연 동영상 보기

※ 이동을 원하는 섹션의 id값을 직접 수정해서 사용하세요

※ 시연 동영상 속 메뉴의 디자인은 직접 수정하여 사용하시기 어려울 수 있어, 코드는 간단한 디자인으로 제공됩니다.

<div class="navcontain">

<nav class="navbutton">

  <a href=" #s2024022190cdbabc944a8">첫번째</a>

  <a href="#s20240223c2056d3266cc4">두번째</a>

  <a href="#s20240223d66a3498acffc">세번째</a>

  <a href="#s2024022662a3a75d1655e">네번째</a>

  <a href="#s20240226f246096c417b8">다섯번째</a>

  <div id="indicator"></div>

</nav>

</div>

<style>

.navcontain {

  position: fixed;

  top:15%;

  left: 50%;

  transform: translateX(-50%);

  z-index: 1000;

  text-align: center;

  background-color: white;

  padding: 0 0; 

  border-radius: 30px; 

}

.navbutton {

  display: flex;

  justify-content: center;

  border-radius: 30px; 

}

.navbutton a {

  background-color: white; 

  color: black;

  padding: 10px 20px;

  text-decoration: none;

  border-radius: 30px; 

  transition: background-color 0.3s;

}

.navbutton a + a {

  margin-left: 20px;

}

.navbutton a:last-child {

  margin-right: 0;

}

.navbutton a:hover {

  background-color: #1A6DFF;

    color: white;

}

</style>