Building a Circular Navigation with CSS Transforms

If you are looking to create an engaging and visually appealing navigation menu, a circular design can significantly enhance user experience. This tutorial guides you through building a circular navigation with CSS transforms, offering a compact and stylish way to present menu items. By leveraging the power of CSS transforms, you can achieve smooth animations and dynamic layouts, making your website more interactive and modern without relying on complex JavaScript for core functionality.

How to Create a Circular Navigation with CSS Transforms

1. Include External Stylesheet

First, add this line into the `head` tag of your HTML document. This links to the Font Awesome library, which provides the icons for our menu items.

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

2. Define the Navigation HTML

Next, create the basic HTML structure for your circular navigation. This includes a toggle checkbox, a label for the toggle, and an unordered list for your menu items.

<nav class='menu'>
  <input checked='checked' class='menu-toggler' id='menu-toggler' type='checkbox'>
  <label for='menu-toggler'></label>
  <ul>
    <li class='menu-item'>
      <a class='fa fa-facebook' href='https://www.facebook.com/' target='_blank'></a>
    </li>
    <li class='menu-item'>
      <a class='fa fa-google' href='https://www.google.com/' target='_blank'></a>
    </li>
    <li class='menu-item'>
      <a class='fa fa-dribbble' href='https://dribbble.com/' target='_blank'></a>
    </li>
    <li class='menu-item'>
      <a class='fa fa-codepen' href='https://codepen.io/' target='_blank'></a>
    </li>
    <li class='menu-item'>
      <a class='fa fa-linkedin' href='https://www.linkedin.com/' target='_blank'></a>
    </li>
    <li class='menu-item'>
      <a class='fa fa-github' href='https://github.com/' target='_blank'></a>
    </li>
  </ul>
</nav>
    <script  src="./script.js"></script>

3. Apply CSS Styles

Now, apply the following CSS rules to style your navigation. These styles manage the layout, appearance, and the magical circular animation using CSS transforms.

body {
  overflow: hidden;
  background: linear-gradient(to right, #fc354c, #0abfbc);
}

.menu-toggler {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after {
  background: white;
}

.menu-toggler:checked + label {
  background: transparent;
}
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after {
  top: 0;
  width: 40px;
  transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
  transform: rotate(45deg);
}
.menu-toggler:checked + label:after {
  transform: rotate(-45deg);
}

.menu-toggler:checked ~ ul .menu-item {
  opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
  transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
  transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
  transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
  transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
  transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
  transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item a {
  pointer-events: auto;
}

.menu-toggler + label {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.menu-toggler + label:before, .menu-toggler + label:after {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggler + label:before {
  top: 10px;
}
.menu-toggler + label:after {
  top: -10px;
}

.menu-item:nth-child(1) a {
  transform: rotate(0deg);
}

.menu-item:nth-child(2) a {
  transform: rotate(-60deg);
}

.menu-item:nth-child(3) a {
  transform: rotate(-120deg);
}

.menu-item:nth-child(4) a {
  transform: rotate(-180deg);
}

.menu-item:nth-child(5) a {
  transform: rotate(-240deg);
}

.menu-item:nth-child(6) a {
  transform: rotate(-300deg);
}

.menu-item {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  display: block;
  opacity: 0;
  transition: 0.5s;
}

.menu-item a {
  display: block;
  width: inherit;
  height: inherit;
  line-height: 80px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font-size: 40px;
  pointer-events: none;
  transition: 0.2s;
}
.menu-item a:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: white;
  background: rgba(255, 255, 255, 0.3);
  font-size: 44.4444444444px;
}

4. Include JavaScript (Optional)

Optionally, if you have any additional interactive behavior, you can include your JavaScript file just before the closing `body` tag. For this specific circular menu, pure CSS handles the main interaction.

With these steps, you have successfully created an interactive and visually appealing circular navigation menu.