Toolsnip

CSS / HTML : Circle Navigation Menu

Introduce a visually appealing circular navigation menu to your website with our CSS snippet, enhancing user interaction with a modern twist.

This innovative snippet creates a circular navigation menu, perfect for sites looking to offer a unique interactive experience with a modern aesthetic.

The menu items are arranged in a circle around a central button, which users can hover or click to expand the menu, revealing more options.

This type of menu is ideal for applications where screen real estate is at a premium or for creating a visually striking focal point for navigation.

The CSS is configured to handle animations and transitions smoothly, providing a delightful and intuitive interaction for users.

Customize the size, colors, and animation speed to match your website's branding and user experience goals.

HTML Code

<nav class='circle-menu'>
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About</a></li>
<li><a href='#services'>Services</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>

CSS Code

.circle-menu ul {
list-style: none;
position: relative;
width: 200px;
height: 200px;
padding: 0;
transform: rotate(-22.5deg);
margin: 100px;
}
.circle-menu li {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(45deg) translate(100px) rotate(-45deg);
}
.circle-menu a {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #eee;
border-radius: 50%;
text-align: center;
transition: background-color 0.3s;
}
.circle-menu a:hover {
background-color: #ccc;
}

Use Cases

  • interactive design
  • user interfaces
  • menu systems