Top Fixed Circular Menu in HTML CSS

Top Fixed Circular Menu In HTML CSS
Code Snippet:The circular menu
Author: Jay Ramoliya
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 469
License: MIT
Edit Code online: View on CodePen
Read More

This HTML & CSS code snippet helps you to create a top fixed circular menu. It uses pie-shaped elements with transitions to display menu options when clicked. The menu appears with icons arranged in a circular pattern, offering a visually appealing way to navigate options. Clicking the central icon toggles the menu’s visibility, making it useful for compactly presenting multiple choices in a visually engaging manner.

It’s great for showcasing options compactly in a visually striking circular layout. The benefit lies in its engaging design, making navigation more interactive for website visitors.

How to Create Top Fixed Circular Menu in HTML CSS

1. Begin by setting up the HTML structure. Use <div> elements for each pie slice in the circular menu. Inside each <div>, include an SVG or any content you want to display for the menu options.

<div class="pie pie1" onclick="document.body.classList.remove('active')">
  <div class="pie-color pie-color1">
    <svg class="card" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
          <path
            d="M99.98 27.38c0-7.597-6.18-13.777-13.78-13.777H13.78C6.18 13.603 0 19.783 0 27.38v45.842C0 80.82 6.18 87 13.778 87H86.2c7.6 0 13.8-6.18 13.8-13.778v-45.84zm-92.678 0c0-3.555 2.9-6.433 6.455-6.433H86.18c3.555 0 6.455 2.878 6.455 6.434v4.213H7.302zM86.18 79.657H13.757c-3.556 0-6.455-2.9-6.455-6.434V44.185h85.312v29.037c.02 3.556-2.88 6.434-6.434 6.434zM23.852 60.82s-3.725-.973-4.466-1.122c-.783-.19-.867-.635-.867-1.015v-.424c0-.255.02-.51.23-.72.128-.127.32-.212.53-.212h3.47c.298 0 .51.064.827.91l.042.127c.04.17.19.445.72.445.316 0 .824-.085 1.438-.254.57-.17 1.058-.635 1.29-1.207.234-.593.17-1.228-.19-1.757-.846-1.334-2.264-2.2-3.936-2.37 0-.128-.02-.297-.02-.51 0-.845-.87-1.523-1.97-1.523s-1.968.657-1.968 1.524c0 .19 0 .36-.02.487-2.668.128-4.572 2.117-4.572 4.848v.804c0 2.137 1.333 4 3.238 4.508l5.354 1.46c.254.064.423.318.423.635v.466c0 .19 0 .7-.232.932-.127.148-.318.21-.487.21h-3.47c-.276 0-.403-.083-.488-.19-.233-.232-.317-.613-.38-.867-.064-.19-.234-.444-.763-.444-.338 0-.846.086-1.418.234-.572.148-1.038.592-1.292 1.164-.254.592-.19 1.248.127 1.8.868 1.46 2.307 2.348 3.916 2.432v.487c0 .445.233.847.636 1.143.36.254.825.38 1.333.38h.02c1.1 0 1.968-.676 1.968-1.523v-.508c2.603-.212 4.593-2.37 4.593-5.1v-.636c.022-2.2-1.48-4.085-3.618-4.614zm7.704 10.54H83.98v-4.19H31.555z"
          />
        </svg>
  </div>
</div>
<div class="pie pie2" onclick="document.body.classList.remove('active')">
  <div class="pie-color pie-color2">
    <svg class="discount" xmlns="http://www.w3.org/2000/svg" viewBox="-375 377 100 100" width="100" height="100">
          <path
            fill="#fff"
            d="M-311.266 425.624c-.106 0-.212 0-.34.022-1.057.127-1.755.783-2.115 2.01-.318 1.1-.36 2.645-.128 4.57.19 1.567.783 6.307 3.407 6.307.105 0 .21 0 .317-.02 1.947-.234 2.603-2.37 2.074-6.667-.507-4.317-1.502-6.222-3.216-6.222zm-28.166-9.967c-.106 0-.212 0-.34.02-.634.086-1.12.34-1.5.827-.784 1.016-1.038 3.005-.7 5.756.508 4.21 1.61 6.242 3.365 6.242.106 0 .19 0 .296-.02 1.12-.128 1.798-.868 2.094-2.265.297-1.397.148-3.153 0-4.36-.508-4.274-1.502-6.2-3.216-6.2zm63.654 10.306l-12.887-7.13c-1.037-.573-1.397-1.885-.783-2.9l7.597-12.613c.613-1.016.147-1.84-1.06-1.82l-14.728.275c-1.185.02-2.137-.93-2.116-2.116l.275-14.73c.022-1.206-.782-1.67-1.82-1.058l-12.61 7.576c-1.017.614-2.33.275-2.9-.783l-7.132-12.887c-.57-1.037-1.524-1.037-2.095 0l-7.13 12.887c-.573 1.037-1.885 1.397-2.9.783l-12.634-7.597c-1.017-.613-1.842-.147-1.82 1.06l.274 14.728c.02 1.185-.93 2.137-2.116 2.116l-14.73-.275c-1.184-.022-1.67.782-1.057 1.82l7.598 12.61c.614 1.017.275 2.33-.783 2.9l-12.887 7.132c-1.037.57-1.037 1.524 0 2.095l12.887 7.13c1.037.573 1.397 1.885.783 2.9l-7.597 12.634c-.613 1.017-.147 1.842 1.06 1.82l14.728-.274c1.185-.02 2.137.93 2.116 2.116l-.275 14.73c-.022 1.205.782 1.67 1.82 1.057l12.61-7.598c1.017-.614 2.33-.275 2.9.783l7.132 12.887c.57 1.037 1.524 1.037 2.095 0l7.13-12.887c.573-1.037 1.885-1.397 2.9-.783l12.613 7.597c1.016.613 1.84.147 1.82-1.06l-.275-14.728c-.02-1.185.93-2.137 2.116-2.116l14.73.275c1.185.022 1.67-.782 1.058-1.82l-7.597-12.61c-.613-1.017-.274-2.33.784-2.9l12.887-7.132c1.06-.592 1.06-1.524.022-2.095zm-62.067 8.19c-.402.042-.783.063-1.185.063-1.905 0-3.577-.592-5.08-1.82-3.11-2.54-3.935-6.2-4.337-9.46-.487-4.04.148-7.28 1.947-9.65 1.523-1.967 3.66-3.173 6.137-3.47.36-.042.72-.063 1.1-.063 2.73 0 5.185 1.27 6.9 3.555 1.395 1.82 2.22 4.17 2.623 7.407.444 3.64 0 6.772-1.29 9.078-1.398 2.476-3.747 3.98-6.815 4.36zm8.634 10.686c-.192.486-.72 1.82-2.308 2.01-.084.02-.17.02-.275.02-1.12 0-2.412-.655-2.582-2.115-.084-.72.148-1.355.36-1.82l13.184-33.817c.36-.762.803-1.777 2.263-1.947.106-.02.212-.02.318-.02 1.122 0 2.307.677 2.498 2.18.084.656-.064 1.08-.233 1.502zm26.345-5.08c-1.396 2.498-3.767 4.02-6.856 4.402-.424.043-.826.085-1.23.085-1.882 0-3.533-.593-5.056-1.82-3.11-2.518-3.936-6.222-4.338-9.502-.487-4.042.17-7.3 1.946-9.65 1.545-1.968 3.66-3.174 6.137-3.47.36-.042.74-.063 1.12-.063 1.948 0 4.74.613 6.92 3.555 1.398 1.82 2.223 4.19 2.625 7.406.444 3.598 0 6.75-1.27 9.058z"
          />
        </svg>
  </div>
</div>
<div class="pie pie3" onclick="document.body.classList.remove('active')">
  <div class="pie-color pie-color3">
    <svg class="cart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
          <path
            d="M98.993 14.537c-.816-.966-2.018-1.503-3.263-1.503H25.698c-.064 0-.107.022-.172.022l-9.36-9.404c-.816-.794-1.91-1.245-3.05-1.245H4.295C1.932 2.407 0 4.34 0 6.7c0 2.363 1.932 4.295 4.294 4.295h7.063l7.73 7.728 9.574 56.893c.344 2.06 2.148 3.585 4.23 3.585h50.388c2.36 0 4.293-1.93 4.293-4.293 0-2.36-1.93-4.293-4.292-4.293h-46.76l-1.588-9.447h54.423c2.104 0 3.908-1.524 4.23-3.606l6.354-39.545c.215-1.267-.128-2.533-.944-3.478zm-60.177 38.02H33.49L31.56 41.03h7.256zm0-20.115H30.1L28.273 21.6h10.542zm16.38 20.116h-7.793V41.03h7.793zm0-20.116h-7.793V21.6h7.793zm16.38 20.116h-7.792V41.03h7.793zm0-20.116h-7.792V21.6h7.793zm14.128 20.116h-5.54V41.03h7.386zm3.22-20.116h-8.78V21.6h10.52zm-47.618 50.13c-4.143 0-7.514 3.37-7.514 7.514 0 4.143 3.37 7.514 7.514 7.514s7.514-3.37 7.514-7.514-3.37-7.514-7.514-7.514zm34.758 0c-4.143 0-7.514 3.37-7.514 7.514 0 4.143 3.37 7.514 7.514 7.514 4.165 0 7.514-3.37 7.514-7.514s-3.35-7.514-7.514-7.514z"
          />
        </svg>
  </div>
</div>
<div class="menu" onclick="document.body.classList.toggle('active')">
  <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
        <g
          fill="none"
          stroke="#000"
          stroke-width="7.999"
          stroke-linecap="round"
        >
          <path d="M 55,26.000284 L 24.056276,25.999716" />
          <path d="M 24.056276,49.999716 L 75.943724,50.000284" />
          <path d="M 45,73.999716 L 75.943724,74.000284" />
          <path d="M 75.943724,26.000284 L 45,25.999716" />
          <path d="M 24.056276,73.999716 L 55,74.000284" />
        </g>
      </svg>
</div>
<div class="title">The circular menu</div>
<div class="body">
  Loreen Epson dollar sin Ahmet, consecutive advertisment elite, seed do equivocal temper
</div>

Update the content within the <div class="title"> and <div class="body"> elements to reflect the purpose of your circular menu. Adjust the text, font styles, and positioning to suit your website’s design.

2. Apply styles to create the circular menu effect. Use CSS to position the elements, define transitions for animations, and apply styles for the menu appearance.

@import url("https://fonts.googleapis.com/css?family=Crimson+Text&display=swap");
@import url("https://fonts.googleapis.com/css?family=Work+Sans&display=swap");
body{
  background: #28305a !important;
  display: block !important;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0 20px;
}
.pie {
  -webkit-tap-highlight-color: transparent;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  height: 400px;
  left: -200px;
  position: absolute;
  top: -200px;
  width: 400px;
  transform: translateX(-200px) translateY(-200px);
  transition: transform 300ms;
}
.pie-color:hover {
  opacity: 0.85;
}
.pie-color:active {
  opacity: 0.7;
}
.pie1 {
  clip-path: polygon(200px 200px, 344px 450px, 0 450px);
  transition-delay: 30ms;
}
.pie2 {
  clip-path: polygon(200px 200px, 344px 450px, 450px 344px);
  transition-delay: 60ms;
}
.pie3 {
  clip-path: polygon(200px 200px, 450px 0, 450px 344px);
  transition-delay: 90ms;
}
.pie-color {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.pie-color1 {
  background: linear-gradient(135deg, #f12711, #f5af19);
  clip-path: polygon(200px 200px, 344px 450px, 0 450px);
}
.pie-color2 {
  background: linear-gradient(135deg, #444, #7e84f9);
  clip-path: polygon(200px 200px, 344px 450px, 450px 344px);
}
.pie-color3 {
  background: linear-gradient(135deg, #444, #b7e13f);
  clip-path: polygon(200px 200px, 450px 0, 450px 344px);
}
.card {
  left: 216px;
  position: absolute;
  top: 300px;
  width: 46px;
}
.discount {
  left: 288px;
  position: absolute;
  top: 258px;
  width: 46px;
}
.cart {
  left: 324px;
  position: absolute;
  top: 188px;
  width: 46px;
}
.menu {
  -webkit-tap-highlight-color: transparent;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  height: 200px;
  left: -100px;
  position: absolute;
  top: -100px;
  width: 200px;
}
.hamburger {
  cursor: pointer;
  height: 46px;
  left: 58%;
  position: relative;
  top: 58%;
  width: 46px;
}
.title {
  color: white;
  font-family: "Crimson Text", serif;
  font-size: 80px;
  line-height: 84px;
  margin-top: 60px;
  text-align: center;
}
.body {
  color: white;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 28px;
  margin: 30px auto;
  max-width: 600px;
  text-align: center;
}
.hamburger path {
  transition: transform 300ms;
}
.hamburger path:nth-child(1) {
  transform-origin: 25% 29%;
}
.hamburger path:nth-child(2) {
  transform-origin: 50% 50%;
}
.hamburger path:nth-child(3) {
  transform-origin: 75% 72%;
}
.hamburger path:nth-child(4) {
  transform-origin: 75% 29%;
}
.hamburger path:nth-child(5) {
  transform-origin: 25% 72%;
}
.active .pie {
  transform: translateX(0) translateY(0);
}
.active .hamburger path:nth-child(1) {
  transform: rotate(45deg);
}
.active .hamburger path:nth-child(2) {
  transform: scaleX(0);
}
.active .hamburger path:nth-child(3) {
  transform: rotate(45deg);
}
.active .hamburger path:nth-child(4) {
  transform: rotate(-45deg);
}
.active .hamburger path:nth-child(5) {
  transform: rotate(-45deg);
}

That’s all! hopefully, you have successfully created a Circular Menu on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...