CSS Circle Menucircular navigationmenuhtmlcssCircular navigation

How to Create Animated Circular Navigation Menu By Kainat Ijaz. Learn Awesome Navigation Using HTML CSS and JavaScript – CSS Animation – @informativeworld713 #cssanimation CSS Animation Tutorial For Beginners to Advance in Hindi/Urdu: In this CSS3 tutorial in Hindi/Urdu we will learn everything you need to learn about CSS from scratch. #css #css3 #css3html5 #css3tutorial #csshovereffect #css3animation #html #html5 #htmltutorial #htmlcss2021

Introduction

Navigation menus are an essential part of any website, allowing visitors to easily navigate through different pages or sections. While traditional navigation menus are usually implemented as horizontal or vertical lists, there are many creative ways to enhance the user experience. In this tutorial, we will learn how to create an animated circular navigation menu using HTML and CSS.

Prerequisites

Before we begin, make sure you have a basic understanding of HTML and CSS. You should also have a code editor installed on your computer, such as Visual Studio Code or Sublime Text.

Step 1: Setting up the HTML structure

First, let’s start by setting up the HTML structure for our circular navigation menu. Open your favorite code editor and create a new HTML file. Inside the <body> tag, add a <div> element with a class of ‘circle-container’. Inside this container, create several <a> elements representing the menu items. Give each menu item a unique class name and add the respective text or icons inside the tags.

<div class='circle-container'>
  <a class='menu-item home' href='#'>Home</a>
  <a class='menu-item about' href='#'>About</a>
  <a class='menu-item services' href='#'>Services</a>
  <a class='menu-item contact' href='#'>Contact</a>
</div>

Feel free to add more menu items or customize the text and icons according to your needs.

Step 2: Styling the circular menu

Now that we have the HTML structure in place, let’s move on to the CSS styling. Add the following CSS code inside the <style> tags in your HTML file or link an external CSS file.

.circle-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #333333;
  font-weight: bold;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: #333333;
  color: #ffffff;
}

The CSS code above styles the circular container and individual menu items. The container is positioned in the center of the page using the ‘translate’ property. Each menu item is absolutely positioned inside the container and centered using the ‘translate’ property as well. The ‘hover’ pseudo-class is used to add a smooth transition effect when hovering over the menu items.

Step 3: Adding animation to the menu

To make our circular menu more engaging, let’s add some animation. We will use CSS keyframes to create a rotating effect. Add the following CSS code inside the <style> tags or your external CSS file.

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.circle-container:hover .menu-item {
  animation: rotate 2s infinite linear;
}

The CSS code above defines a keyframe animation called ‘rotate’ that rotates the menu items 360 degrees. When hovering over the circle container, the animation is applied to the menu items, creating a continuous rotating effect.

Conclusion

In this tutorial, we have learned how to create an animated circular navigation menu using HTML and CSS. You can further customize the menu by adding additional styles or effects. Experiment with different colors, sizes, and animations to create a unique and visually appealing navigation experience for your website visitors.

Remember to test your menu across different browsers and devices to ensure compatibility. Feel free to share your creations or ask any questions in the comments below!

Visit Our Youtube Channel

Related: https://getfreesoft.shop/awesome-spinner-using-html-css-css-animation-informativeworld713-cssanimation/

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated radial / circular menu</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="circular-menu">
  <div class="circle">
    <a href="" class="fa fa-home fa-2x"></a>
    <a href="" class="fa fa-facebook fa-2x"></a>
    <a href="" class="fa fa-twitter fa-2x"></a>
    <a href="" class="fa fa-linkedin fa-2x"></a>
    <a href="" class="fa fa-github fa-2x"></a>
    <a href="" class="fa fa-rss fa-2x"></a>
    <a href="" class="fa fa-pinterest fa-2x"></a>
    <a href="" class="fa fa-asterisk fa-2x"></a>
  </div>
  <a href="" class="menu-button fa fa-bars fa-2x"></a>
</nav>
<script  src="js/script.js"></script>
</body>
</html>
@import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
  background: #39D;
  display: flex;
  min-height: 100vh;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.circular-menu {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  position: relative;
}
.circle {
  width: 250px;
  height: 250px;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.open.circle {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}
.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;
}
.circle a:hover {
  color: #eef;
}
.menu-button {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  text-decoration: none;
  text-align: center;
  color: #444;
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  padding: 10px;
  background: #dde;
}
.menu-button:hover {
  background-color: #eef;
}
var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  
  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *