create menu mobile

Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects

by oktaviardi pratama

HTML

<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<div class="navigation">
    <ul>
      <li class="list active">
        <a href="#">
          <span class="icon">
            <ion-icon name="home-outline"></ion-icon>
          </span>
          <span class="text">Home</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="person-outline"></ion-icon>
          </span>
          <span class="text">profile</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="chatbubble-outline"></ion-icon>
          </span>
          <span class="text">message</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="images-outline"></ion-icon>
          </span>
          <span class="text">Photos</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="settings-outline"></ion-icon>
          </span>
          <span class="text">Settings</span>
        </a>
      </li>
      <div class="indicator"></div>
    </ul>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif
}
:root {  
  --clr: #222327;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--clr);
}

.navigation {
  width: 400px;
  height: 70px;
  background: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  
  ul {
    display: flex;
    width: 350px;
    
    li {
      position: relative;
      list-style: none;
      width: 70px;
      height: 70px;
      z-index: 1;
      
      &.active a .text {
        opacity: 1;
        transform: translateY(10px);
      }
      
      a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        text-align: center;
        font-weight: 500;
        
        .icon {
          position: relative;
          display: block;
          line-height: 75px;
          font-size: 1.5em;
          text-align: center;
          transition: 0.5s;
          color: var(--clr);
        }
 
        .text {
          position: absolute;
          color: var(--clr);
          font-weight: 400;
          font-size: 0.75 em;
          letter-spacing: 0.05em;
          transition: 0.5s;
          opacity: 0;
        }
      }
      &.active {
        a {
          .icon {
            transform: translateY(-35px);
          }
          .text {
            opacity: 1;
            transform: translateY(10px);
          }
          
        }
      }
      &:nth-child(1).active ~ .indicator {
        transform: translateX(calc(70px * 0));
      }
      &:nth-child(2).active ~ .indicator {
        transform: translateX(calc(70px * 1));
      }
      &:nth-child(3).active ~ .indicator {
        transform: translateX(calc(70px * 2));
      }
      &:nth-child(4).active ~ .indicator {
        transform:...

JavaScript

const list = document.querySelectorAll('.list');
function activeLink() {
	list.forEach((item) => 
  	item.classList.remove('active'));
    this.classList.add('active');
}
list.forEach((item) => 
item.addEventListener('click', activeLink));