Dynamic and Responsive

Navigation with CSS
Animated CSS Menu with Color Changing Bal

Create a Stunning Menu Without JS

A horizontal, animated navigation menu, created using CSS3. The menu implementation takes place by placing the HTML code in the target location on the page and editing the CSS variables. The navigation is responsive - it adjusts to the screen width. Made without using JavaScript.

To add navigation to a website, place the code from the index.html tab in any location on the target page. Then place the code from the menu.css tab in our stylesheet. Below the demo there is a modification instruction for the code.

<div class="compsoul-menu-ball-body">
<nav class="compsoul-menu-ball">
  <ul class="menu-container">
    <li class="menu-item">
      <a href="#" class="menu-link">Home</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">About us</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">Offer</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">Contact</a>
    </li>
    <li class="menu-item-ball ball">
      <span class="ball-container">
        <span class="ball-gradient">
          <span class="hidden">
            Ball
          </span>
        </span>
      </span>
    </li>
  </ul>
</nav>
</div>
.hidden {
  border: 0 !important;
  height: 1px !important;
  opacity: 0;
  overflow: hidden;
  padding: 0 !important;
  pointer-events: none;
  position: absolute !important;
  width: 1px !important;
}

.compsoul-menu-ball-body {
  align-items: center;
  background: #2c3333;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}

.compsoul-menu-ball {
  --number-of-items: 4;
  padding: 250px 0;
  width: 80%;
}

.compsoul-menu-ball .menu-container,
.compsoul-menu-ball .menu-item,
.compsoul-menu-ball .menu-link {
  border: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.compsoul-menu-ball .menu-container {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  z-index: 0;
}

.compsoul-menu-ball .menu-container:before {
  background: #fff;
  bottom: 0;
  border-radius: 16px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
}

.compsoul-menu-ball .menu-item {
  width: calc(100% / var(--number-of-items));
}

.compsoul-menu-ball .menu-link {
  color: #2c3333;
  display: block;
  padding: 24px 0;
  text-align: center;
  width: 100%;
}

.compsoul-menu-ball .menu-item-ball {
  --background-ball: #005aab;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(0, -100%);
  transition: transform 0.6s;
  width: calc(100% / var(--number-of-items));
}

.compsoul-menu-ball .menu-item:hover + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item-ball {
  --background-ball: #ffe162;
  transform: translate(calc((var(--number-of-items) - 1) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item-ball {
  --background-ball: #219f94;
  transform: translate(calc((var(--number-of-items) - 2) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item-ball {
  --background-ball: #fc4f4f;
  transform: translate(calc((var(--number-of-items) - 3) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item-ball {
  --background-ball: #005aab;
  transform: translate(calc((var(--number-of-items) - 4) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 5) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item  + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 6) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item  + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 7) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item  + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 8) * 100%), -100%);
}

.compsoul-menu-ball .ball-container {
  align-items: center;
  border: 16px solid #2c3333;
  border-radius: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 64px;
  margin: 0 0 -16px;
  overflow: hidden;
  position: relative;
  width: 64px;
  z-index: 0;
}

.compsoul-menu-ball .ball-container:before,
.compsoul-menu-ball .ball-container:after{
  background: var(--background-ball);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  transition: background 0.8s;
  top: 0;
  z-index: -1;
}

.compsoul-menu-ball .ball-container:after{
  background: linear-gradient(#0000001a, #ffffff1a); 
}

.compsoul-menu-ball .ball-gradient {
  background: linear-gradient(#ffffff33, #0000001a, #ffffff33);
  border-radius: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 100%;
  width: 90%;
}

.compsoul-menu-ball .ball-gradient:before {
  background: linear-gradient(#fff, #ffffff05);
  border-radius: 100%;
  content: "";
  height: 40%;
  transform: translate(0, 25%);
  width: 60%;
}

Editing the navigation is done by adjusting the CSS variables in the code:

  • number-of-items - this variable is responsible for setting the width of each item. It is used to calculate the animation of the ball's movement. The variable takes the number of items as its value.
  • background-ball - this variable is responsible for assigning the color of the ball to each item in the menu. The variable takes different values, depending on the position of the item in the menu.

The menu has been designed to allow for a maximum of 8 items to be added. However, it can be expanded to any number.